dockview-core 2.1.4 → 3.0.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 (79) hide show
  1. package/dist/cjs/api/component.api.d.ts +4 -3
  2. package/dist/cjs/api/component.api.js +8 -22
  3. package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts +2 -1
  4. package/dist/cjs/dockview/components/titlebar/tabsContainer.js +30 -33
  5. package/dist/cjs/dockview/options.d.ts +4 -8
  6. package/dist/cjs/dockview/options.js +28 -20
  7. package/dist/cjs/events.d.ts +9 -0
  8. package/dist/cjs/events.js +18 -1
  9. package/dist/cjs/gridview/baseComponentGridview.js +1 -2
  10. package/dist/cjs/gridview/gridviewComponent.js +15 -24
  11. package/dist/cjs/gridview/options.d.ts +10 -12
  12. package/dist/cjs/gridview/options.js +15 -0
  13. package/dist/cjs/index.d.ts +4 -4
  14. package/dist/cjs/index.js +8 -1
  15. package/dist/cjs/paneview/defaultPaneviewHeader.d.ts +2 -2
  16. package/dist/cjs/paneview/draggablePaneviewPanel.d.ts +6 -2
  17. package/dist/cjs/paneview/draggablePaneviewPanel.js +8 -9
  18. package/dist/cjs/paneview/options.d.ts +25 -21
  19. package/dist/cjs/paneview/options.js +42 -0
  20. package/dist/cjs/paneview/paneviewComponent.d.ts +12 -15
  21. package/dist/cjs/paneview/paneviewComponent.js +30 -40
  22. package/dist/cjs/paneview/paneviewPanel.d.ts +3 -8
  23. package/dist/cjs/splitview/options.d.ts +7 -9
  24. package/dist/cjs/splitview/options.js +17 -0
  25. package/dist/cjs/splitview/splitview.d.ts +5 -5
  26. package/dist/cjs/splitview/splitviewComponent.js +10 -21
  27. package/dist/dockview-core.amd.js +161 -161
  28. package/dist/dockview-core.amd.js.map +1 -1
  29. package/dist/dockview-core.amd.min.js +2 -2
  30. package/dist/dockview-core.amd.min.js.map +1 -1
  31. package/dist/dockview-core.amd.min.noStyle.js +2 -2
  32. package/dist/dockview-core.amd.min.noStyle.js.map +1 -1
  33. package/dist/dockview-core.amd.noStyle.js +161 -161
  34. package/dist/dockview-core.amd.noStyle.js.map +1 -1
  35. package/dist/dockview-core.cjs.js +161 -161
  36. package/dist/dockview-core.cjs.js.map +1 -1
  37. package/dist/dockview-core.esm.js +157 -161
  38. package/dist/dockview-core.esm.js.map +1 -1
  39. package/dist/dockview-core.esm.min.js +2 -2
  40. package/dist/dockview-core.esm.min.js.map +1 -1
  41. package/dist/dockview-core.js +161 -161
  42. package/dist/dockview-core.js.map +1 -1
  43. package/dist/dockview-core.min.js +2 -2
  44. package/dist/dockview-core.min.js.map +1 -1
  45. package/dist/dockview-core.min.noStyle.js +2 -2
  46. package/dist/dockview-core.min.noStyle.js.map +1 -1
  47. package/dist/dockview-core.noStyle.js +161 -161
  48. package/dist/dockview-core.noStyle.js.map +1 -1
  49. package/dist/esm/api/component.api.d.ts +4 -3
  50. package/dist/esm/api/component.api.js +4 -10
  51. package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts +2 -1
  52. package/dist/esm/dockview/components/titlebar/tabsContainer.js +20 -23
  53. package/dist/esm/dockview/options.d.ts +4 -8
  54. package/dist/esm/dockview/options.js +4 -9
  55. package/dist/esm/events.d.ts +9 -0
  56. package/dist/esm/events.js +11 -0
  57. package/dist/esm/gridview/baseComponentGridview.js +1 -2
  58. package/dist/esm/gridview/gridviewComponent.js +15 -24
  59. package/dist/esm/gridview/options.d.ts +10 -12
  60. package/dist/esm/gridview/options.js +14 -1
  61. package/dist/esm/index.d.ts +4 -4
  62. package/dist/esm/index.js +3 -0
  63. package/dist/esm/paneview/defaultPaneviewHeader.d.ts +2 -2
  64. package/dist/esm/paneview/draggablePaneviewPanel.d.ts +6 -2
  65. package/dist/esm/paneview/draggablePaneviewPanel.js +8 -9
  66. package/dist/esm/paneview/options.d.ts +25 -21
  67. package/dist/esm/paneview/options.js +22 -1
  68. package/dist/esm/paneview/paneviewComponent.d.ts +12 -15
  69. package/dist/esm/paneview/paneviewComponent.js +30 -40
  70. package/dist/esm/paneview/paneviewPanel.d.ts +3 -8
  71. package/dist/esm/splitview/options.d.ts +7 -9
  72. package/dist/esm/splitview/options.js +16 -1
  73. package/dist/esm/splitview/splitview.d.ts +5 -5
  74. package/dist/esm/splitview/splitviewComponent.js +10 -21
  75. package/package.json +1 -1
  76. package/dist/cjs/panel/componentFactory.d.ts +0 -11
  77. package/dist/cjs/panel/componentFactory.js +0 -30
  78. package/dist/esm/panel/componentFactory.d.ts +0 -11
  79. package/dist/esm/panel/componentFactory.js +0 -24
@@ -12,11 +12,11 @@ import { ISplitviewPanel } from '../splitview/splitviewPanel';
12
12
  import { DockviewGroupPanel, IDockviewGroupPanel } from '../dockview/dockviewGroupPanel';
13
13
  import { Event } from '../events';
14
14
  import { IDockviewPanel } from '../dockview/dockviewPanel';
15
- import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
15
+ import { PaneviewDidDropEvent } 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';
19
+ import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from '../paneview/options';
20
20
  import { SplitviewComponentOptions } from '../splitview/options';
21
21
  import { GridviewComponentOptions } from '../gridview/options';
22
22
  export interface CommonApi<T = any> {
@@ -164,7 +164,8 @@ export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
164
164
  /**
165
165
  * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
166
166
  */
167
- get onDidDrop(): Event<PaneviewDropEvent>;
167
+ get onDidDrop(): Event<PaneviewDidDropEvent>;
168
+ get onUnhandledDragOverEvent(): Event<PaneviewDndOverlayEvent>;
168
169
  constructor(component: IPaneviewComponent);
169
170
  /**
170
171
  * Remove a panel given the panel object.
@@ -1,4 +1,3 @@
1
- import { Emitter } from '../events';
2
1
  export class SplitviewApi {
3
2
  /**
4
3
  * The minimum size the component can reach where size is measured in the direction of orientation provided.
@@ -195,15 +194,10 @@ export class PaneviewApi {
195
194
  * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
196
195
  */
197
196
  get onDidDrop() {
198
- const emitter = new Emitter();
199
- const disposable = this.component.onDidDrop((e) => {
200
- emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
201
- });
202
- emitter.dispose = () => {
203
- disposable.dispose();
204
- emitter.dispose();
205
- };
206
- return emitter.event;
197
+ return this.component.onDidDrop;
198
+ }
199
+ get onUnhandledDragOverEvent() {
200
+ return this.component.onUnhandledDragOverEvent;
207
201
  }
208
202
  constructor(component) {
209
203
  this.component = component;
@@ -76,10 +76,11 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
76
76
  indexOf(id: string): number;
77
77
  constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
78
78
  setActive(_isGroupActive: boolean): void;
79
- private addTab;
80
79
  delete(id: string): void;
81
80
  setActivePanel(panel: IDockviewPanel): void;
82
81
  openPanel(panel: IDockviewPanel, index?: number): void;
83
82
  closePanel(panel: IDockviewPanel): void;
84
83
  dispose(): void;
84
+ private addTab;
85
+ private updateClassnames;
85
86
  }
@@ -108,15 +108,7 @@ export class TabsContainer extends CompositeDisposable {
108
108
  this._element.appendChild(this.leftActionsContainer);
109
109
  this._element.appendChild(this.voidContainer.element);
110
110
  this._element.appendChild(this.rightActionsContainer);
111
- this.addDisposables(this.accessor.onDidAddPanel((e) => {
112
- if (e.api.group === this.group) {
113
- toggleClass(this._element, 'dv-single-tab', this.size === 1);
114
- }
115
- }), this.accessor.onDidRemovePanel((e) => {
116
- if (e.api.group === this.group) {
117
- toggleClass(this._element, 'dv-single-tab', this.size === 1);
118
- }
119
- }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
111
+ this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
120
112
  this._onGroupDragStart.fire({
121
113
  nativeEvent: event,
122
114
  group: this.group,
@@ -161,20 +153,6 @@ export class TabsContainer extends CompositeDisposable {
161
153
  setActive(_isGroupActive) {
162
154
  // noop
163
155
  }
164
- addTab(tab, index = this.tabs.length) {
165
- if (index < 0 || index > this.tabs.length) {
166
- throw new Error('invalid location');
167
- }
168
- this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
169
- this.tabs = [
170
- ...this.tabs.slice(0, index),
171
- tab,
172
- ...this.tabs.slice(index),
173
- ];
174
- if (this.selectedIndex < 0) {
175
- this.selectedIndex = index;
176
- }
177
- }
178
156
  delete(id) {
179
157
  const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
180
158
  const tabToRemove = this.tabs.splice(index, 1)[0];
@@ -182,6 +160,7 @@ export class TabsContainer extends CompositeDisposable {
182
160
  disposable.dispose();
183
161
  value.dispose();
184
162
  value.element.remove();
163
+ this.updateClassnames();
185
164
  }
186
165
  setActivePanel(panel) {
187
166
  this.tabs.forEach((tab) => {
@@ -250,4 +229,22 @@ export class TabsContainer extends CompositeDisposable {
250
229
  }
251
230
  this.tabs = [];
252
231
  }
232
+ addTab(tab, index = this.tabs.length) {
233
+ if (index < 0 || index > this.tabs.length) {
234
+ throw new Error('invalid location');
235
+ }
236
+ this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
237
+ this.tabs = [
238
+ ...this.tabs.slice(0, index),
239
+ tab,
240
+ ...this.tabs.slice(index),
241
+ ];
242
+ if (this.selectedIndex < 0) {
243
+ this.selectedIndex = index;
244
+ }
245
+ this.updateClassnames();
246
+ }
247
+ updateClassnames() {
248
+ toggleClass(this._element, 'dv-single-tab', this.size === 1);
249
+ }
253
250
  }
@@ -13,6 +13,7 @@ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
13
13
  import { IGroupHeaderProps } from './framework';
14
14
  import { FloatingGroupOptions } from './dockviewComponent';
15
15
  import { Contraints } from '../gridview/gridviewPanel';
16
+ import { AcceptableEvent, IAcceptableEvent } from '../events';
16
17
  export interface IHeaderActionsRenderer extends IDisposable {
17
18
  readonly element: HTMLElement;
18
19
  init(params: IGroupHeaderProps): void;
@@ -55,27 +56,22 @@ export interface DockviewOptions {
55
56
  */
56
57
  noPanelsOverlay?: 'emptyGroup' | 'watermark';
57
58
  }
58
- export interface DockviewDndOverlayEvent {
59
+ export interface DockviewDndOverlayEvent extends IAcceptableEvent {
59
60
  nativeEvent: DragEvent;
60
61
  target: DockviewGroupDropLocation;
61
62
  position: Position;
62
63
  group?: DockviewGroupPanel;
63
64
  getData: () => PanelTransfer | undefined;
64
- isAccepted: boolean;
65
- accept(): void;
66
65
  }
67
- export declare class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
66
+ export declare class DockviewUnhandledDragOverEvent extends AcceptableEvent implements DockviewDndOverlayEvent {
68
67
  readonly nativeEvent: DragEvent;
69
68
  readonly target: DockviewGroupDropLocation;
70
69
  readonly position: Position;
71
70
  readonly getData: () => PanelTransfer | undefined;
72
71
  readonly group?: DockviewGroupPanel | undefined;
73
- private _isAccepted;
74
- get isAccepted(): boolean;
75
72
  constructor(nativeEvent: DragEvent, target: DockviewGroupDropLocation, position: Position, getData: () => PanelTransfer | undefined, group?: DockviewGroupPanel | undefined);
76
- accept(): void;
77
73
  }
78
- export declare const PROPERTY_KEYS: (keyof DockviewOptions)[];
74
+ export declare const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[];
79
75
  export interface CreateComponentOptions {
80
76
  /**
81
77
  * The unqiue identifer of the component
@@ -1,20 +1,15 @@
1
- export class DockviewUnhandledDragOverEvent {
2
- get isAccepted() {
3
- return this._isAccepted;
4
- }
1
+ import { AcceptableEvent } from '../events';
2
+ export class DockviewUnhandledDragOverEvent extends AcceptableEvent {
5
3
  constructor(nativeEvent, target, position, getData, group) {
4
+ super();
6
5
  this.nativeEvent = nativeEvent;
7
6
  this.target = target;
8
7
  this.position = position;
9
8
  this.getData = getData;
10
9
  this.group = group;
11
- this._isAccepted = false;
12
- }
13
- accept() {
14
- this._isAccepted = true;
15
10
  }
16
11
  }
17
- export const PROPERTY_KEYS = (() => {
12
+ export const PROPERTY_KEYS_DOCKVIEW = (() => {
18
13
  /**
19
14
  * by readong the keys from an empty value object TypeScript will error
20
15
  * when we add or remove new properties to `DockviewOptions`
@@ -17,6 +17,15 @@ export declare class DockviewEvent implements IDockviewEvent {
17
17
  get defaultPrevented(): boolean;
18
18
  preventDefault(): void;
19
19
  }
20
+ export interface IAcceptableEvent {
21
+ readonly isAccepted: boolean;
22
+ accept(): void;
23
+ }
24
+ export declare class AcceptableEvent implements IAcceptableEvent {
25
+ private _isAccepted;
26
+ get isAccepted(): boolean;
27
+ accept(): void;
28
+ }
20
29
  declare class LeakageMonitor {
21
30
  readonly events: Map<Event<any>, Stacktrace>;
22
31
  get size(): number;
@@ -24,6 +24,17 @@ export class DockviewEvent {
24
24
  this._defaultPrevented = true;
25
25
  }
26
26
  }
27
+ export class AcceptableEvent {
28
+ constructor() {
29
+ this._isAccepted = false;
30
+ }
31
+ get isAccepted() {
32
+ return this._isAccepted;
33
+ }
34
+ accept() {
35
+ this._isAccepted = true;
36
+ }
37
+ }
27
38
  class LeakageMonitor {
28
39
  constructor() {
29
40
  this.events = new Map();
@@ -60,7 +60,7 @@ export class BaseGrid extends Resizable {
60
60
  }
61
61
  constructor(parentElement, options) {
62
62
  var _a;
63
- super(document.createElement('div'), options.disableAutoResizing);
63
+ super(parentElement, options.disableAutoResizing);
64
64
  this._id = nextLayoutId.next();
65
65
  this._groups = new Map();
66
66
  this._onDidRemove = new Emitter();
@@ -79,7 +79,6 @@ export class BaseGrid extends Resizable {
79
79
  this.element.style.width = '100%';
80
80
  this._classNames = new Classnames(this.element);
81
81
  this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
82
- parentElement.appendChild(this.element);
83
82
  this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
84
83
  this.gridview.locked = !!options.locked;
85
84
  this.element.appendChild(this.gridview.element);
@@ -2,7 +2,6 @@ import { getRelativeLocation, getGridLocation, } from './gridview';
2
2
  import { tail, sequenceEquals } from '../array';
3
3
  import { CompositeDisposable } from '../lifecycle';
4
4
  import { BaseGrid, toTarget, } from './baseComponentGridview';
5
- import { createComponent } from '../panel/componentFactory';
6
5
  import { Emitter } from '../events';
7
6
  export class GridviewComponent extends BaseGrid {
8
7
  get orientation() {
@@ -21,10 +20,13 @@ export class GridviewComponent extends BaseGrid {
21
20
  this._deserializer = value;
22
21
  }
23
22
  constructor(parentElement, options) {
23
+ var _a;
24
24
  super(parentElement, {
25
- proportionalLayout: options.proportionalLayout,
25
+ proportionalLayout: (_a = options.proportionalLayout) !== null && _a !== void 0 ? _a : true,
26
26
  orientation: options.orientation,
27
- styles: options.styles,
27
+ styles: options.hideBorders
28
+ ? { separatorBorder: 'transparent' }
29
+ : undefined,
28
30
  disableAutoResizing: options.disableAutoResizing,
29
31
  className: options.className,
30
32
  });
@@ -44,12 +46,6 @@ export class GridviewComponent extends BaseGrid {
44
46
  }), this.onDidActiveChange((event) => {
45
47
  this._onDidActiveGroupChange.fire(event);
46
48
  }));
47
- if (!this.options.components) {
48
- this.options.components = {};
49
- }
50
- if (!this.options.frameworkComponents) {
51
- this.options.frameworkComponents = {};
52
- }
53
49
  }
54
50
  updateOptions(options) {
55
51
  super.updateOptions(options);
@@ -99,14 +95,11 @@ export class GridviewComponent extends BaseGrid {
99
95
  const height = this.height;
100
96
  this.gridview.deserialize(grid, {
101
97
  fromJSON: (node) => {
102
- var _a, _b;
103
98
  const { data } = node;
104
- const view = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkComponentFactory
105
- ? {
106
- createComponent: this.options.frameworkComponentFactory
107
- .createComponent,
108
- }
109
- : undefined);
99
+ const view = this.options.createComponent({
100
+ id: data.id,
101
+ name: data.component,
102
+ });
110
103
  queue.push(() => view.init({
111
104
  params: data.params,
112
105
  minimumWidth: data.minimumWidth,
@@ -184,7 +177,7 @@ export class GridviewComponent extends BaseGrid {
184
177
  this.doAddGroup(removedPanel, relativeLocation, options.size);
185
178
  }
186
179
  addPanel(options) {
187
- var _a, _b, _c, _d, _e, _f;
180
+ var _a, _b, _c, _d;
188
181
  let relativeLocation = (_a = options.location) !== null && _a !== void 0 ? _a : [0];
189
182
  if ((_b = options.position) === null || _b === void 0 ? void 0 : _b.referencePanel) {
190
183
  const referenceGroup = (_c = this._groups.get(options.position.referencePanel)) === null || _c === void 0 ? void 0 : _c.value;
@@ -200,14 +193,12 @@ export class GridviewComponent extends BaseGrid {
200
193
  relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
201
194
  }
202
195
  }
203
- const view = createComponent(options.id, options.component, (_d = this.options.components) !== null && _d !== void 0 ? _d : {}, (_e = this.options.frameworkComponents) !== null && _e !== void 0 ? _e : {}, this.options.frameworkComponentFactory
204
- ? {
205
- createComponent: this.options.frameworkComponentFactory
206
- .createComponent,
207
- }
208
- : undefined);
196
+ const view = this.options.createComponent({
197
+ id: options.id,
198
+ name: options.component,
199
+ });
209
200
  view.init({
210
- params: (_f = options.params) !== null && _f !== void 0 ? _f : {},
201
+ params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
211
202
  minimumWidth: options.minimumWidth,
212
203
  maximumWidth: options.maximumWidth,
213
204
  minimumHeight: options.minimumHeight,
@@ -1,17 +1,15 @@
1
1
  import { GridviewPanel } from './gridviewPanel';
2
- import { ISplitviewStyles, Orientation } from '../splitview/splitview';
3
- import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
4
- export interface GridviewComponentOptions {
2
+ import { Orientation } from '../splitview/splitview';
3
+ import { CreateComponentOptions } from '../dockview/options';
4
+ export interface GridviewOptions {
5
5
  disableAutoResizing?: boolean;
6
- proportionalLayout: boolean;
6
+ proportionalLayout?: boolean;
7
7
  orientation: Orientation;
8
- components?: {
9
- [componentName: string]: ComponentConstructor<GridviewPanel>;
10
- };
11
- frameworkComponents?: {
12
- [componentName: string]: any;
13
- };
14
- frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
15
- styles?: ISplitviewStyles;
16
8
  className?: string;
9
+ hideBorders?: boolean;
17
10
  }
11
+ export interface GridviewFrameworkOptions {
12
+ createComponent: (options: CreateComponentOptions) => GridviewPanel;
13
+ }
14
+ export type GridviewComponentOptions = GridviewOptions & GridviewFrameworkOptions;
15
+ export declare const PROPERTY_KEYS_GRIDVIEW: (keyof GridviewOptions)[];
@@ -1 +1,14 @@
1
- export {};
1
+ export const PROPERTY_KEYS_GRIDVIEW = (() => {
2
+ /**
3
+ * by readong the keys from an empty value object TypeScript will error
4
+ * when we add or remove new properties to `DockviewOptions`
5
+ */
6
+ const properties = {
7
+ disableAutoResizing: undefined,
8
+ proportionalLayout: undefined,
9
+ orientation: undefined,
10
+ hideBorders: undefined,
11
+ className: undefined,
12
+ };
13
+ return Object.keys(properties);
14
+ })();
@@ -8,12 +8,12 @@ export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
8
8
  export { IDisposable as DockviewIDisposable, MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle';
9
9
  export * from './panel/types';
10
10
  export * from './splitview/splitview';
11
- export { SplitviewComponentOptions, PanelViewInitParameters, } from './splitview/options';
11
+ export { SplitviewComponentOptions, PanelViewInitParameters, SplitviewOptions, SplitviewFrameworkOptions, PROPERTY_KEYS_SPLITVIEW, } from './splitview/options';
12
12
  export * from './paneview/paneview';
13
13
  export * from './gridview/gridview';
14
- export { GridviewComponentOptions } from './gridview/options';
14
+ export { GridviewComponentOptions, GridviewOptions, GridviewFrameworkOptions, PROPERTY_KEYS_GRIDVIEW, } from './gridview/options';
15
15
  export * from './gridview/baseComponentGridview';
16
- export { DraggablePaneviewPanel, PaneviewDropEvent, } from './paneview/draggablePaneviewPanel';
16
+ export { DraggablePaneviewPanel, PaneviewDidDropEvent as PaneviewDropEvent, } from './paneview/draggablePaneviewPanel';
17
17
  export * from './dockview/components/panel/content';
18
18
  export * from './dockview/components/tab/tab';
19
19
  export * from './dockview/dockviewGroupPanelModel';
@@ -29,7 +29,7 @@ export * from './dockview/dockviewComponent';
29
29
  export * from './gridview/gridviewComponent';
30
30
  export * from './splitview/splitviewComponent';
31
31
  export * from './paneview/paneviewComponent';
32
- export { PaneviewComponentOptions } from './paneview/options';
32
+ export { PaneviewComponentOptions, PaneviewOptions, PaneviewFrameworkOptions, PROPERTY_KEYS_PANEVIEW, PaneviewUnhandledDragOverEvent, PaneviewDndOverlayEvent, } from './paneview/options';
33
33
  export * from './gridview/gridviewPanel';
34
34
  export { SplitviewPanel, ISplitviewPanel } from './splitview/splitviewPanel';
35
35
  export * from './paneview/paneviewPanel';
package/dist/esm/index.js CHANGED
@@ -8,8 +8,10 @@ export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
8
8
  export { MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle';
9
9
  export * from './panel/types';
10
10
  export * from './splitview/splitview';
11
+ export { PROPERTY_KEYS_SPLITVIEW, } from './splitview/options';
11
12
  export * from './paneview/paneview';
12
13
  export * from './gridview/gridview';
14
+ export { PROPERTY_KEYS_GRIDVIEW, } from './gridview/options';
13
15
  export * from './gridview/baseComponentGridview';
14
16
  export { DraggablePaneviewPanel, } from './paneview/draggablePaneviewPanel';
15
17
  export * from './dockview/components/panel/content';
@@ -25,6 +27,7 @@ export * from './dockview/dockviewComponent';
25
27
  export * from './gridview/gridviewComponent';
26
28
  export * from './splitview/splitviewComponent';
27
29
  export * from './paneview/paneviewComponent';
30
+ export { PROPERTY_KEYS_PANEVIEW, PaneviewUnhandledDragOverEvent, } from './paneview/options';
28
31
  export * from './gridview/gridviewPanel';
29
32
  export { SplitviewPanel } from './splitview/splitviewPanel';
30
33
  export * from './paneview/paneviewPanel';
@@ -1,8 +1,8 @@
1
1
  import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
2
2
  import { CompositeDisposable } from '../lifecycle';
3
3
  import { PanelUpdateEvent } from '../panel/types';
4
- import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
5
- export declare class DefaultHeader extends CompositeDisposable implements IPaneHeaderPart {
4
+ import { IPanePart, PanePanelInitParameter } from './paneviewPanel';
5
+ export declare class DefaultHeader extends CompositeDisposable implements IPanePart {
6
6
  private readonly _expandedIcon;
7
7
  private readonly _collapsedIcon;
8
8
  private readonly disposable;
@@ -1,10 +1,12 @@
1
1
  import { PaneviewApi } from '../api/component.api';
2
2
  import { PaneTransfer } from '../dnd/dataTransfer';
3
3
  import { DroptargetEvent } from '../dnd/droptarget';
4
+ import { Event } from '../events';
4
5
  import { Orientation } from '../splitview/splitview';
6
+ import { PaneviewDndOverlayEvent } from './options';
5
7
  import { IPaneviewComponent } from './paneviewComponent';
6
8
  import { IPaneviewPanel, PaneviewPanel } from './paneviewPanel';
7
- export interface PaneviewDropEvent extends DroptargetEvent {
9
+ export interface PaneviewDidDropEvent extends DroptargetEvent {
8
10
  panel: IPaneviewPanel;
9
11
  getData: () => PaneTransfer | undefined;
10
12
  api: PaneviewApi;
@@ -14,7 +16,9 @@ export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
14
16
  private handler;
15
17
  private target;
16
18
  private readonly _onDidDrop;
17
- readonly onDidDrop: import("../events").Event<PaneviewDropEvent>;
19
+ readonly onDidDrop: Event<PaneviewDidDropEvent>;
20
+ private readonly _onUnhandledDragOverEvent;
21
+ readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
18
22
  constructor(accessor: IPaneviewComponent, id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
19
23
  private initDragFeatures;
20
24
  private onDrop;
@@ -3,6 +3,7 @@ import { DragHandler } from '../dnd/abstractDragHandler';
3
3
  import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
4
4
  import { Droptarget } from '../dnd/droptarget';
5
5
  import { Emitter } from '../events';
6
+ import { PaneviewUnhandledDragOverEvent, } from './options';
6
7
  import { PaneviewPanel, } from './paneviewPanel';
7
8
  export class DraggablePaneviewPanel extends PaneviewPanel {
8
9
  constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
@@ -10,6 +11,9 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
10
11
  this.accessor = accessor;
11
12
  this._onDidDrop = new Emitter();
12
13
  this.onDidDrop = this._onDidDrop.event;
14
+ this._onUnhandledDragOverEvent = new Emitter();
15
+ this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
16
+ this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
13
17
  if (!disableDnd) {
14
18
  this.initDragFeatures();
15
19
  }
@@ -36,7 +40,7 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
36
40
  overlayModel: {
37
41
  activationSize: { type: 'percentage', value: 50 },
38
42
  },
39
- canDisplayOverlay: (event) => {
43
+ canDisplayOverlay: (event, position) => {
40
44
  const data = getPaneData();
41
45
  if (data) {
42
46
  if (data.paneId !== this.id &&
@@ -44,14 +48,9 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
44
48
  return true;
45
49
  }
46
50
  }
47
- if (this.accessor.options.showDndOverlay) {
48
- return this.accessor.options.showDndOverlay({
49
- nativeEvent: event,
50
- getData: getPaneData,
51
- panel: this,
52
- });
53
- }
54
- return false;
51
+ const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
52
+ this._onUnhandledDragOverEvent.fire(firedEvent);
53
+ return firedEvent.isAccepted;
55
54
  },
56
55
  });
57
56
  this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -1,25 +1,29 @@
1
- import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
2
- import { PaneviewDndOverlayEvent } from './paneviewComponent';
3
- import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel';
4
- export interface PaneviewComponentOptions {
1
+ import { PaneTransfer } from '../dnd/dataTransfer';
2
+ import { Position } from '../dnd/droptarget';
3
+ import { CreateComponentOptions } from '../dockview/options';
4
+ import { AcceptableEvent, IAcceptableEvent } from '../events';
5
+ import { IPanePart, IPaneviewPanel } from './paneviewPanel';
6
+ export interface PaneviewOptions {
5
7
  disableAutoResizing?: boolean;
6
- components?: {
7
- [componentName: string]: ComponentConstructor<PaneviewPanel>;
8
- };
9
- frameworkComponents?: {
10
- [componentName: string]: any;
11
- };
12
- headerComponents?: {
13
- [componentName: string]: ComponentConstructor<PaneviewPanel>;
14
- };
15
- headerframeworkComponents?: {
16
- [componentName: string]: any;
17
- };
18
- frameworkWrapper?: {
19
- header: FrameworkFactory<IPaneHeaderPart>;
20
- body: FrameworkFactory<IPaneBodyPart>;
21
- };
22
8
  disableDnd?: boolean;
23
- showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
24
9
  className?: string;
25
10
  }
11
+ export interface PaneviewFrameworkOptions {
12
+ createComponent: (options: CreateComponentOptions) => IPanePart;
13
+ createHeaderComponent?: (options: CreateComponentOptions) => IPanePart | undefined;
14
+ }
15
+ export type PaneviewComponentOptions = PaneviewOptions & PaneviewFrameworkOptions;
16
+ export declare const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[];
17
+ export interface PaneviewDndOverlayEvent extends IAcceptableEvent {
18
+ nativeEvent: DragEvent;
19
+ position: Position;
20
+ panel: IPaneviewPanel;
21
+ getData: () => PaneTransfer | undefined;
22
+ }
23
+ export declare class PaneviewUnhandledDragOverEvent extends AcceptableEvent implements PaneviewDndOverlayEvent {
24
+ readonly nativeEvent: DragEvent;
25
+ readonly position: Position;
26
+ readonly getData: () => PaneTransfer | undefined;
27
+ readonly panel: IPaneviewPanel;
28
+ constructor(nativeEvent: DragEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
29
+ }
@@ -1 +1,22 @@
1
- export {};
1
+ import { AcceptableEvent } from '../events';
2
+ export const PROPERTY_KEYS_PANEVIEW = (() => {
3
+ /**
4
+ * by readong the keys from an empty value object TypeScript will error
5
+ * when we add or remove new properties to `DockviewOptions`
6
+ */
7
+ const properties = {
8
+ disableAutoResizing: undefined,
9
+ disableDnd: undefined,
10
+ className: undefined,
11
+ };
12
+ return Object.keys(properties);
13
+ })();
14
+ export class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
15
+ constructor(nativeEvent, position, getData, panel) {
16
+ super();
17
+ this.nativeEvent = nativeEvent;
18
+ this.position = position;
19
+ this.getData = getData;
20
+ this.panel = panel;
21
+ }
22
+ }
@@ -1,18 +1,12 @@
1
1
  import { Event } from '../events';
2
2
  import { IDisposable } from '../lifecycle';
3
3
  import { LayoutPriority, Orientation } from '../splitview/splitview';
4
- import { PaneviewComponentOptions } from './options';
4
+ import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from './options';
5
5
  import { Paneview } from './paneview';
6
- import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
7
- import { DraggablePaneviewPanel, PaneviewDropEvent } from './draggablePaneviewPanel';
8
- import { PaneTransfer } from '../dnd/dataTransfer';
6
+ import { IPanePart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
7
+ import { DraggablePaneviewPanel, PaneviewDidDropEvent } from './draggablePaneviewPanel';
9
8
  import { Resizable } from '../resizable';
10
9
  import { Parameters } from '../panel/types';
11
- export interface PaneviewDndOverlayEvent {
12
- nativeEvent: DragEvent;
13
- panel: IPaneviewPanel;
14
- getData: () => PaneTransfer | undefined;
15
- }
16
10
  export interface SerializedPaneviewPanel {
17
11
  snap?: boolean;
18
12
  priority?: LayoutPriority;
@@ -40,15 +34,15 @@ export declare class PaneFramework extends DraggablePaneviewPanel {
40
34
  id: string;
41
35
  component: string;
42
36
  headerComponent: string | undefined;
43
- body: IPaneBodyPart;
44
- header: IPaneHeaderPart;
37
+ body: IPanePart;
38
+ header: IPanePart;
45
39
  orientation: Orientation;
46
40
  isExpanded: boolean;
47
41
  disableDnd: boolean;
48
42
  accessor: IPaneviewComponent;
49
43
  });
50
- getBodyComponent(): IPaneBodyPart;
51
- getHeaderComponent(): IPaneHeaderPart;
44
+ getBodyComponent(): IPanePart;
45
+ getHeaderComponent(): IPanePart;
52
46
  }
53
47
  export interface AddPaneviewComponentOptions<T extends object = Parameters> {
54
48
  id: string;
@@ -72,9 +66,10 @@ export interface IPaneviewComponent extends IDisposable {
72
66
  readonly options: PaneviewComponentOptions;
73
67
  readonly onDidAddView: Event<PaneviewPanel>;
74
68
  readonly onDidRemoveView: Event<PaneviewPanel>;
75
- readonly onDidDrop: Event<PaneviewDropEvent>;
69
+ readonly onDidDrop: Event<PaneviewDidDropEvent>;
76
70
  readonly onDidLayoutChange: Event<void>;
77
71
  readonly onDidLayoutFromJSON: Event<void>;
72
+ readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
78
73
  addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
79
74
  layout(width: number, height: number): void;
80
75
  toJSON(): SerializedPaneview;
@@ -98,11 +93,13 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
98
93
  private readonly _onDidLayoutChange;
99
94
  readonly onDidLayoutChange: Event<void>;
100
95
  private readonly _onDidDrop;
101
- readonly onDidDrop: Event<PaneviewDropEvent>;
96
+ readonly onDidDrop: Event<PaneviewDidDropEvent>;
102
97
  private readonly _onDidAddView;
103
98
  readonly onDidAddView: Event<PaneviewPanel>;
104
99
  private readonly _onDidRemoveView;
105
100
  readonly onDidRemoveView: Event<PaneviewPanel>;
101
+ private readonly _onUnhandledDragOverEvent;
102
+ readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
106
103
  private readonly _classNames;
107
104
  get id(): string;
108
105
  get panels(): PaneviewPanel[];