dockview 1.1.0 → 1.3.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 (162) hide show
  1. package/dist/cjs/api/component.api.d.ts +17 -15
  2. package/dist/cjs/api/component.api.js +22 -22
  3. package/dist/cjs/api/component.api.js.map +1 -1
  4. package/dist/cjs/dnd/abstractDragHandler.d.ts +1 -1
  5. package/dist/cjs/dnd/abstractDragHandler.js +2 -3
  6. package/dist/cjs/dnd/abstractDragHandler.js.map +1 -1
  7. package/dist/cjs/dnd/droptarget.js +3 -3
  8. package/dist/cjs/dnd/droptarget.js.map +1 -1
  9. package/dist/cjs/dockview/components/tab/defaultTab.d.ts +1 -1
  10. package/dist/cjs/dockview/components/tab/defaultTab.js +1 -1
  11. package/dist/cjs/dockview/components/tab/defaultTab.js.map +1 -1
  12. package/dist/cjs/dockview/components/watermark/watermark.d.ts +3 -3
  13. package/dist/cjs/dockview/components/watermark/watermark.js +4 -4
  14. package/dist/cjs/dockview/components/watermark/watermark.js.map +1 -1
  15. package/dist/cjs/dockview/deserializer.js.map +1 -1
  16. package/dist/cjs/dockview/dockviewComponent.d.ts +8 -5
  17. package/dist/cjs/dockview/dockviewComponent.js +60 -41
  18. package/dist/cjs/dockview/dockviewComponent.js.map +1 -1
  19. package/dist/cjs/dockview/dockviewGroupPanel.d.ts +1 -0
  20. package/dist/cjs/dockview/dockviewGroupPanel.js +8 -0
  21. package/dist/cjs/dockview/dockviewGroupPanel.js.map +1 -1
  22. package/dist/cjs/gridview/baseComponentGridview.d.ts +3 -20
  23. package/dist/cjs/gridview/baseComponentGridview.js +35 -43
  24. package/dist/cjs/gridview/baseComponentGridview.js.map +1 -1
  25. package/dist/cjs/gridview/basePanelView.js +2 -0
  26. package/dist/cjs/gridview/basePanelView.js.map +1 -1
  27. package/dist/cjs/gridview/branchNode.js +2 -2
  28. package/dist/cjs/gridview/branchNode.js.map +1 -1
  29. package/dist/cjs/gridview/gridview.js +3 -2
  30. package/dist/cjs/gridview/gridview.js.map +1 -1
  31. package/dist/cjs/gridview/gridviewComponent.d.ts +3 -9
  32. package/dist/cjs/gridview/gridviewComponent.js +30 -18
  33. package/dist/cjs/gridview/gridviewComponent.js.map +1 -1
  34. package/dist/cjs/gridview/leafNode.js +1 -1
  35. package/dist/cjs/gridview/leafNode.js.map +1 -1
  36. package/dist/cjs/groupview/groupPanel.d.ts +1 -0
  37. package/dist/cjs/groupview/groupview.d.ts +3 -2
  38. package/dist/cjs/groupview/groupview.js +15 -6
  39. package/dist/cjs/groupview/groupview.js.map +1 -1
  40. package/dist/cjs/groupview/panel/content.d.ts +1 -1
  41. package/dist/cjs/groupview/panel/content.js +1 -1
  42. package/dist/cjs/groupview/panel/content.js.map +1 -1
  43. package/dist/cjs/hostedContainer.js +2 -2
  44. package/dist/cjs/hostedContainer.js.map +1 -1
  45. package/dist/cjs/index.d.ts +2 -2
  46. package/dist/cjs/index.js +8 -4
  47. package/dist/cjs/index.js.map +1 -1
  48. package/dist/cjs/panel/types.d.ts +1 -0
  49. package/dist/cjs/paneview/defaultPaneviewHeader.d.ts +1 -1
  50. package/dist/cjs/paneview/defaultPaneviewHeader.js +1 -1
  51. package/dist/cjs/paneview/defaultPaneviewHeader.js.map +1 -1
  52. package/dist/cjs/paneview/draggablePaneviewPanel.js +1 -1
  53. package/dist/cjs/paneview/draggablePaneviewPanel.js.map +1 -1
  54. package/dist/cjs/paneview/paneview.d.ts +3 -1
  55. package/dist/cjs/paneview/paneview.js +12 -6
  56. package/dist/cjs/paneview/paneview.js.map +1 -1
  57. package/dist/cjs/paneview/paneviewComponent.d.ts +12 -5
  58. package/dist/cjs/paneview/paneviewComponent.js +68 -16
  59. package/dist/cjs/paneview/paneviewComponent.js.map +1 -1
  60. package/dist/cjs/react/dockview/components.js +5 -1
  61. package/dist/cjs/react/dockview/components.js.map +1 -1
  62. package/dist/cjs/react/dockview/dockview.js +32 -10
  63. package/dist/cjs/react/dockview/dockview.js.map +1 -1
  64. package/dist/cjs/react/dockview/reactContentPart.d.ts +2 -2
  65. package/dist/cjs/react/dockview/reactContentPart.js +2 -13
  66. package/dist/cjs/react/dockview/reactContentPart.js.map +1 -1
  67. package/dist/cjs/react/dockview/reactHeaderPart.d.ts +2 -2
  68. package/dist/cjs/react/dockview/reactHeaderPart.js +2 -2
  69. package/dist/cjs/react/dockview/reactHeaderPart.js.map +1 -1
  70. package/dist/cjs/react/dockview/reactWatermarkPart.d.ts +2 -2
  71. package/dist/cjs/react/dockview/reactWatermarkPart.js +2 -2
  72. package/dist/cjs/react/dockview/reactWatermarkPart.js.map +1 -1
  73. package/dist/cjs/react/dockview/v2/reactContentRenderer.d.ts +2 -2
  74. package/dist/cjs/react/dockview/v2/reactContentRenderer.js +2 -2
  75. package/dist/cjs/react/dockview/v2/reactContentRenderer.js.map +1 -1
  76. package/dist/cjs/react/dockview/v2/webviewContentRenderer.d.ts +2 -2
  77. package/dist/cjs/react/dockview/v2/webviewContentRenderer.js +2 -2
  78. package/dist/cjs/react/dockview/v2/webviewContentRenderer.js.map +1 -1
  79. package/dist/cjs/react/gridview/gridview.js +9 -2
  80. package/dist/cjs/react/gridview/gridview.js.map +1 -1
  81. package/dist/cjs/react/gridview/view.d.ts +3 -2
  82. package/dist/cjs/react/gridview/view.js.map +1 -1
  83. package/dist/cjs/react/index.js +5 -1
  84. package/dist/cjs/react/index.js.map +1 -1
  85. package/dist/cjs/react/paneview/paneview.js +6 -2
  86. package/dist/cjs/react/paneview/paneview.js.map +1 -1
  87. package/dist/cjs/react/react.js +5 -1
  88. package/dist/cjs/react/react.js.map +1 -1
  89. package/dist/cjs/react/splitview/splitview.js +8 -2
  90. package/dist/cjs/react/splitview/splitview.js.map +1 -1
  91. package/dist/cjs/splitview/core/splitview.js +1 -1
  92. package/dist/cjs/splitview/core/splitview.js.map +1 -1
  93. package/dist/cjs/splitview/splitviewComponent.d.ts +5 -3
  94. package/dist/cjs/splitview/splitviewComponent.js +55 -16
  95. package/dist/cjs/splitview/splitviewComponent.js.map +1 -1
  96. package/dist/dockview.amd.js +316 -312
  97. package/dist/dockview.amd.min.js +2 -2
  98. package/dist/dockview.amd.min.noStyle.js +2 -2
  99. package/dist/dockview.amd.noStyle.js +315 -311
  100. package/dist/dockview.cjs.js +316 -312
  101. package/dist/dockview.esm.js +316 -306
  102. package/dist/dockview.esm.min.js +2 -2
  103. package/dist/dockview.js +316 -312
  104. package/dist/dockview.min.js +2 -2
  105. package/dist/dockview.min.noStyle.js +2 -2
  106. package/dist/dockview.noStyle.js +315 -311
  107. package/dist/esm/api/component.api.d.ts +17 -15
  108. package/dist/esm/api/component.api.js +14 -14
  109. package/dist/esm/dnd/abstractDragHandler.d.ts +1 -1
  110. package/dist/esm/dnd/abstractDragHandler.js +2 -3
  111. package/dist/esm/dnd/droptarget.js +3 -3
  112. package/dist/esm/dockview/components/tab/defaultTab.d.ts +1 -1
  113. package/dist/esm/dockview/components/tab/defaultTab.js +1 -1
  114. package/dist/esm/dockview/components/watermark/watermark.d.ts +3 -3
  115. package/dist/esm/dockview/components/watermark/watermark.js +4 -4
  116. package/dist/esm/dockview/dockviewComponent.d.ts +8 -5
  117. package/dist/esm/dockview/dockviewComponent.js +34 -38
  118. package/dist/esm/dockview/dockviewGroupPanel.d.ts +1 -0
  119. package/dist/esm/dockview/dockviewGroupPanel.js +4 -0
  120. package/dist/esm/gridview/baseComponentGridview.d.ts +3 -20
  121. package/dist/esm/gridview/baseComponentGridview.js +13 -43
  122. package/dist/esm/gridview/basePanelView.js +2 -0
  123. package/dist/esm/gridview/branchNode.js +2 -2
  124. package/dist/esm/gridview/gridview.js +2 -1
  125. package/dist/esm/gridview/gridviewComponent.d.ts +3 -9
  126. package/dist/esm/gridview/gridviewComponent.js +9 -19
  127. package/dist/esm/groupview/groupPanel.d.ts +1 -0
  128. package/dist/esm/groupview/groupview.d.ts +3 -2
  129. package/dist/esm/groupview/groupview.js +8 -3
  130. package/dist/esm/groupview/panel/content.d.ts +1 -1
  131. package/dist/esm/groupview/panel/content.js +1 -1
  132. package/dist/esm/hostedContainer.js +2 -2
  133. package/dist/esm/index.d.ts +2 -2
  134. package/dist/esm/index.js +1 -2
  135. package/dist/esm/panel/types.d.ts +1 -0
  136. package/dist/esm/paneview/defaultPaneviewHeader.d.ts +1 -1
  137. package/dist/esm/paneview/defaultPaneviewHeader.js +1 -1
  138. package/dist/esm/paneview/draggablePaneviewPanel.js +1 -1
  139. package/dist/esm/paneview/paneview.d.ts +3 -1
  140. package/dist/esm/paneview/paneview.js +9 -5
  141. package/dist/esm/paneview/paneviewComponent.d.ts +12 -5
  142. package/dist/esm/paneview/paneviewComponent.js +34 -15
  143. package/dist/esm/react/dockview/dockview.js +27 -9
  144. package/dist/esm/react/dockview/reactContentPart.d.ts +2 -2
  145. package/dist/esm/react/dockview/reactContentPart.js +2 -13
  146. package/dist/esm/react/dockview/reactHeaderPart.d.ts +2 -2
  147. package/dist/esm/react/dockview/reactHeaderPart.js +2 -2
  148. package/dist/esm/react/dockview/reactWatermarkPart.d.ts +2 -2
  149. package/dist/esm/react/dockview/reactWatermarkPart.js +2 -2
  150. package/dist/esm/react/dockview/v2/reactContentRenderer.d.ts +2 -2
  151. package/dist/esm/react/dockview/v2/reactContentRenderer.js +2 -2
  152. package/dist/esm/react/dockview/v2/webviewContentRenderer.d.ts +2 -2
  153. package/dist/esm/react/dockview/v2/webviewContentRenderer.js +2 -2
  154. package/dist/esm/react/gridview/gridview.js +4 -1
  155. package/dist/esm/react/gridview/view.d.ts +3 -2
  156. package/dist/esm/react/paneview/paneview.js +1 -1
  157. package/dist/esm/react/splitview/splitview.js +3 -1
  158. package/dist/esm/splitview/core/splitview.js +1 -1
  159. package/dist/esm/splitview/splitviewComponent.d.ts +5 -3
  160. package/dist/esm/splitview/splitviewComponent.js +22 -15
  161. package/dist/styles/dockview.css +10 -10
  162. package/package.json +13 -13
@@ -23,6 +23,9 @@ export class PaneviewComponent extends CompositeDisposable {
23
23
  super();
24
24
  this.element = element;
25
25
  this._disposable = new MutableDisposable();
26
+ this._viewDisposables = new Map();
27
+ this._onDidLayoutfromJSON = new Emitter();
28
+ this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
26
29
  this._onDidLayoutChange = new Emitter();
27
30
  this.onDidLayoutChange = this._onDidLayoutChange.event;
28
31
  this._onDidDrop = new Emitter();
@@ -31,7 +34,7 @@ export class PaneviewComponent extends CompositeDisposable {
31
34
  this.onDidAddView = this._onDidAddView.event;
32
35
  this._onDidRemoveView = new Emitter();
33
36
  this.onDidRemoveView = this._onDidRemoveView.event;
34
- this.addDisposables(this._onDidLayoutChange, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
37
+ this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
35
38
  this._options = options;
36
39
  if (!options.components) {
37
40
  options.components = {};
@@ -107,9 +110,7 @@ export class PaneviewComponent extends CompositeDisposable {
107
110
  isExpanded: !!options.isExpanded,
108
111
  disableDnd: !!this.options.disableDnd,
109
112
  });
110
- const disposable = new CompositeDisposable(view.onDidDrop((event) => {
111
- this._onDidDrop.fire(event);
112
- }));
113
+ this.doAddPanel(view);
113
114
  const size = typeof options.size === 'number' ? options.size : Sizing.Distribute;
114
115
  const index = typeof options.index === 'number' ? options.index : undefined;
115
116
  view.init({
@@ -122,7 +123,7 @@ export class PaneviewComponent extends CompositeDisposable {
122
123
  });
123
124
  this.paneview.addPane(view, size, index);
124
125
  view.orientation = this.paneview.orientation;
125
- return disposable;
126
+ return view;
126
127
  }
127
128
  getPanels() {
128
129
  return this.paneview.getPanes();
@@ -131,6 +132,7 @@ export class PaneviewComponent extends CompositeDisposable {
131
132
  const views = this.getPanels();
132
133
  const index = views.findIndex((_) => _ === panel);
133
134
  this.paneview.removePane(index);
135
+ this.doRemovePanel(panel);
134
136
  }
135
137
  movePanel(from, to) {
136
138
  this.paneview.moveView(from, to);
@@ -177,9 +179,13 @@ export class PaneviewComponent extends CompositeDisposable {
177
179
  size: this.paneview.size,
178
180
  };
179
181
  }
180
- fromJSON(serializedPaneview, deferComponentLayout) {
182
+ fromJSON(serializedPaneview) {
181
183
  const { views, size } = serializedPaneview;
182
184
  const queue = [];
185
+ for (const [_, value] of this._viewDisposables.entries()) {
186
+ value.dispose();
187
+ }
188
+ this._viewDisposables.clear();
183
189
  this.paneview.dispose();
184
190
  this.paneview = new Paneview(this.element, {
185
191
  orientation: Orientation.VERTICAL,
@@ -215,9 +221,7 @@ export class PaneviewComponent extends CompositeDisposable {
215
221
  isExpanded: !!view.expanded,
216
222
  disableDnd: !!this.options.disableDnd,
217
223
  });
218
- panel.onDidDrop((event) => {
219
- this._onDidDrop.fire(event);
220
- });
224
+ this.doAddPanel(panel);
221
225
  queue.push(() => {
222
226
  panel.init({
223
227
  params: data.params || {},
@@ -238,13 +242,28 @@ export class PaneviewComponent extends CompositeDisposable {
238
242
  },
239
243
  });
240
244
  this.layout(this.width, this.height);
241
- if (deferComponentLayout) {
242
- setTimeout(() => {
243
- queue.forEach((f) => f());
244
- }, 0);
245
+ queue.forEach((f) => f());
246
+ this._onDidLayoutfromJSON.fire();
247
+ }
248
+ doAddPanel(panel) {
249
+ const disposable = panel.onDidDrop((event) => {
250
+ this._onDidDrop.fire(event);
251
+ });
252
+ this._viewDisposables.set(panel.id, disposable);
253
+ }
254
+ doRemovePanel(panel) {
255
+ const disposable = this._viewDisposables.get(panel.id);
256
+ if (disposable) {
257
+ disposable.dispose();
258
+ this._viewDisposables.delete(panel.id);
245
259
  }
246
- else {
247
- queue.forEach((f) => f());
260
+ }
261
+ dispose() {
262
+ super.dispose();
263
+ for (const [_, value] of this._viewDisposables.entries()) {
264
+ value.dispose();
248
265
  }
266
+ this._viewDisposables.clear();
267
+ this.paneview.dispose();
249
268
  }
250
269
  }
@@ -31,21 +31,21 @@ export const DockviewReact = React.forwardRef((props, ref) => {
31
31
  var _a;
32
32
  const factory = {
33
33
  content: {
34
- createComponent: (id, componentId, component) => {
34
+ createComponent: (_id, componentId, component) => {
35
35
  return new ReactPanelContentPart(componentId, component, {
36
36
  addPortal,
37
37
  });
38
38
  },
39
39
  },
40
40
  tab: {
41
- createComponent: (id, componentId, component) => {
41
+ createComponent: (_id, componentId, component) => {
42
42
  return new ReactPanelHeaderPart(componentId, component, {
43
43
  addPortal,
44
44
  });
45
45
  },
46
46
  },
47
47
  watermark: {
48
- createComponent: (id, componentId, component) => {
48
+ createComponent: (_id, componentId, component) => {
49
49
  return new ReactWatermarkPart(componentId, component, {
50
50
  addPortal,
51
51
  });
@@ -64,11 +64,6 @@ export const DockviewReact = React.forwardRef((props, ref) => {
64
64
  ? { separatorBorder: 'transparent' }
65
65
  : undefined,
66
66
  });
67
- const disposable = dockview.onDidDrop((event) => {
68
- if (props.onDidDrop) {
69
- props.onDidDrop(event);
70
- }
71
- });
72
67
  (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
73
68
  dockview.deserializer = new ReactPanelDeserialzier(dockview);
74
69
  const { clientWidth, clientHeight } = domRef.current;
@@ -78,10 +73,25 @@ export const DockviewReact = React.forwardRef((props, ref) => {
78
73
  }
79
74
  dockviewRef.current = dockview;
80
75
  return () => {
81
- disposable.dispose();
82
76
  dockview.dispose();
77
+ element.remove();
83
78
  };
84
79
  }, []);
80
+ React.useEffect(() => {
81
+ if (!dockviewRef.current) {
82
+ return () => {
83
+ // noop
84
+ };
85
+ }
86
+ const disposable = dockviewRef.current.onDidDrop((event) => {
87
+ if (props.onDidDrop) {
88
+ props.onDidDrop(event);
89
+ }
90
+ });
91
+ return () => {
92
+ disposable.dispose();
93
+ };
94
+ }, [props.onDidDrop]);
85
95
  React.useEffect(() => {
86
96
  if (!dockviewRef.current) {
87
97
  return;
@@ -90,6 +100,14 @@ export const DockviewReact = React.forwardRef((props, ref) => {
90
100
  frameworkComponents: props.components,
91
101
  });
92
102
  }, [props.components]);
103
+ React.useEffect(() => {
104
+ if (!dockviewRef.current) {
105
+ return;
106
+ }
107
+ dockviewRef.current.updateOptions({
108
+ watermarkFrameworkComponent: props.watermarkComponent,
109
+ });
110
+ }, [props.watermarkComponent]);
93
111
  React.useEffect(() => {
94
112
  if (!dockviewRef.current) {
95
113
  return;
@@ -40,8 +40,8 @@ export declare class ReactPanelContentPart implements IContentRenderer {
40
40
  id: string;
41
41
  };
42
42
  update(event: PanelUpdateEvent): void;
43
- updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
44
- layout(width: number, height: number): void;
43
+ updateParentGroup(group: GroupviewPanel, _isPanelVisible: boolean): void;
44
+ layout(_width: number, _height: number): void;
45
45
  close(): Promise<boolean>;
46
46
  dispose(): void;
47
47
  }
@@ -5,18 +5,12 @@ export class ReactPanelContentPart {
5
5
  this.id = id;
6
6
  this.component = component;
7
7
  this.reactPortalStore = reactPortalStore;
8
- // private hostedContainer: HostedContainer;
9
8
  this._onDidFocus = new Emitter();
10
9
  this.onDidFocus = this._onDidFocus.event;
11
10
  this._onDidBlur = new Emitter();
12
11
  this.onDidBlur = this._onDidBlur.event;
13
12
  this._element = document.createElement('div');
14
13
  this._element.className = 'dockview-react-part';
15
- // this.hostedContainer = new HostedContainer({
16
- // id,
17
- // });
18
- // this.hostedContainer.onDidFocus(() => this._onDidFocus.fire());
19
- // this.hostedContainer.onDidBlur(() => this._onDidBlur.fire());
20
14
  this._actionsElement = document.createElement('div');
21
15
  this._actionsElement.className = 'dockview-react-part';
22
16
  }
@@ -51,15 +45,11 @@ export class ReactPanelContentPart {
51
45
  var _a;
52
46
  (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
53
47
  }
54
- updateParentGroup(group, isPanelVisible) {
48
+ updateParentGroup(group, _isPanelVisible) {
55
49
  this._group = group;
56
50
  }
57
- layout(width, height) {
51
+ layout(_width, _height) {
58
52
  // noop
59
- // this.hostedContainer.layout(
60
- // this.element
61
- // // { width, height }
62
- // );
63
53
  }
64
54
  close() {
65
55
  return Promise.resolve(true);
@@ -69,7 +59,6 @@ export class ReactPanelContentPart {
69
59
  this._onDidFocus.dispose();
70
60
  this._onDidBlur.dispose();
71
61
  (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
72
- // this.hostedContainer?.dispose();
73
62
  (_b = this.actionsPart) === null || _b === void 0 ? void 0 : _b.dispose();
74
63
  }
75
64
  }
@@ -18,7 +18,7 @@ export declare class ReactPanelHeaderPart implements ITabRenderer {
18
18
  toJSON(): {
19
19
  id: string;
20
20
  };
21
- layout(width: number, height: number): void;
22
- updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
21
+ layout(_width: number, _height: number): void;
22
+ updateParentGroup(_group: GroupviewPanel, _isPanelVisible: boolean): void;
23
23
  dispose(): void;
24
24
  }
@@ -29,10 +29,10 @@ export class ReactPanelHeaderPart {
29
29
  id: this.id,
30
30
  };
31
31
  }
32
- layout(width, height) {
32
+ layout(_width, _height) {
33
33
  // noop - retrieval from api
34
34
  }
35
- updateParentGroup(group, isPanelVisible) {
35
+ updateParentGroup(_group, _isPanelVisible) {
36
36
  // noop - retrieval from api
37
37
  }
38
38
  dispose() {
@@ -23,7 +23,7 @@ export declare class ReactWatermarkPart implements IWatermarkRenderer {
23
23
  toJSON(): {
24
24
  id: string;
25
25
  };
26
- layout(width: number, height: number): void;
27
- updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
26
+ layout(_width: number, _height: number): void;
27
+ updateParentGroup(group: GroupviewPanel, _isPanelVisible: boolean): void;
28
28
  dispose(): void;
29
29
  }
@@ -41,10 +41,10 @@ export class ReactWatermarkPart {
41
41
  id: this.id,
42
42
  };
43
43
  }
44
- layout(width, height) {
44
+ layout(_width, _height) {
45
45
  // noop - retrieval from api
46
46
  }
47
- updateParentGroup(group, isPanelVisible) {
47
+ updateParentGroup(group, _isPanelVisible) {
48
48
  // noop - retrieval from api
49
49
  this._groupRef.value = group;
50
50
  }
@@ -23,8 +23,8 @@ export declare class ReactContentRenderer implements IContentRenderer {
23
23
  id: string;
24
24
  };
25
25
  update(params: PanelUpdateEvent): void;
26
- updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
27
- layout(width: number, height: number): void;
26
+ updateParentGroup(group: GroupviewPanel, _isPanelVisible: boolean): void;
27
+ layout(_width: number, _height: number): void;
28
28
  close(): Promise<boolean>;
29
29
  dispose(): void;
30
30
  }
@@ -56,10 +56,10 @@ export class ReactContentRenderer {
56
56
  }
57
57
  (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
58
58
  }
59
- updateParentGroup(group, isPanelVisible) {
59
+ updateParentGroup(group, _isPanelVisible) {
60
60
  this._group = group;
61
61
  }
62
- layout(width, height) {
62
+ layout(_width, _height) {
63
63
  this._hostedContainer.layout(this.element);
64
64
  }
65
65
  close() {
@@ -12,7 +12,7 @@ export declare class WebviewContentRenderer implements IContentRenderer {
12
12
  init(parameters: GroupPanelPartInitParameters): void;
13
13
  toJSON(): {};
14
14
  update(params: PanelUpdateEvent): void;
15
- updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
16
- layout(width: number, height: number): void;
15
+ updateParentGroup(_group: GroupviewPanel, _isPanelVisible: boolean): void;
16
+ layout(_width: number, _height: number): void;
17
17
  dispose(): void;
18
18
  }
@@ -24,10 +24,10 @@ export class WebviewContentRenderer {
24
24
  this.parameters.params = params.params;
25
25
  }
26
26
  }
27
- updateParentGroup(group, isPanelVisible) {
27
+ updateParentGroup(_group, _isPanelVisible) {
28
28
  //
29
29
  }
30
- layout(width, height) {
30
+ layout(_width, _height) {
31
31
  this._hostedContainer.layout(this._element);
32
32
  }
33
33
  dispose() {
@@ -28,7 +28,9 @@ export const GridviewReact = React.forwardRef((props, ref) => {
28
28
  var _a;
29
29
  const element = document.createElement('div');
30
30
  const gridview = new GridviewComponent(element, {
31
- proportionalLayout: !!props.proportionalLayout,
31
+ proportionalLayout: typeof props.proportionalLayout === 'boolean'
32
+ ? props.proportionalLayout
33
+ : true,
32
34
  orientation: props.orientation,
33
35
  frameworkComponents: props.components,
34
36
  frameworkComponentFactory: {
@@ -51,6 +53,7 @@ export const GridviewReact = React.forwardRef((props, ref) => {
51
53
  gridviewRef.current = gridview;
52
54
  return () => {
53
55
  gridview.dispose();
56
+ element.remove();
54
57
  };
55
58
  }, []);
56
59
  React.useEffect(() => {
@@ -1,10 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  import { GridviewPanel } from '../../gridview/gridviewPanel';
3
- import { ReactPart, ReactPortalStore } from '../react';
3
+ import { IFrameworkPart } from '../../panel/types';
4
+ import { ReactPortalStore } from '../react';
4
5
  import { IGridviewPanelProps } from './gridview';
5
6
  export declare class ReactGridPanelView extends GridviewPanel {
6
7
  private readonly reactComponent;
7
8
  private readonly reactPortalStore;
8
9
  constructor(id: string, component: string, reactComponent: React.FunctionComponent<IGridviewPanelProps>, reactPortalStore: ReactPortalStore);
9
- getComponent(): ReactPart<IGridviewPanelProps<any>, {}>;
10
+ getComponent(): IFrameworkPart;
10
11
  }
@@ -25,7 +25,7 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
25
25
  };
26
26
  }, [props.disableAutoResizing]);
27
27
  React.useEffect(() => {
28
- const createComponent = (id, componentId, component) => new PanePanelSection(id, component, {
28
+ const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
29
29
  addPortal,
30
30
  });
31
31
  const paneview = new PaneviewComponent(domRef.current, {
@@ -35,7 +35,9 @@ export const SplitviewReact = React.forwardRef((props, ref) => {
35
35
  });
36
36
  },
37
37
  },
38
- proportionalLayout: props.proportionalLayout,
38
+ proportionalLayout: typeof props.proportionalLayout === 'boolean'
39
+ ? props.proportionalLayout
40
+ : true,
39
41
  styles: props.hideBorders
40
42
  ? { separatorBorder: 'transparent' }
41
43
  : undefined,
@@ -678,12 +678,12 @@ export class Splitview {
678
678
  this._onDidSashEnd.dispose();
679
679
  this._onDidAddView.dispose();
680
680
  this._onDidRemoveView.dispose();
681
- this.element.remove();
682
681
  for (let i = 0; i < this.element.children.length; i++) {
683
682
  if (this.element.children.item(i) === this.element) {
684
683
  this.element.removeChild(this.element);
685
684
  break;
686
685
  }
687
686
  }
687
+ this.element.remove();
688
688
  }
689
689
  }
@@ -26,7 +26,6 @@ export interface SerializedSplitview {
26
26
  views: SerializedSplitviewPanel[];
27
27
  }
28
28
  export interface AddSplitviewComponentOptions extends BaseComponentOptions {
29
- size?: number;
30
29
  index?: number;
31
30
  minimumSize?: number;
32
31
  maximumSize?: number;
@@ -41,12 +40,13 @@ export interface ISplitviewComponent extends IDisposable {
41
40
  readonly orientation: Orientation;
42
41
  readonly onDidAddView: Event<IView>;
43
42
  readonly onDidRemoveView: Event<IView>;
43
+ readonly onDidLayoutFromJSON: Event<void>;
44
44
  updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
45
45
  addPanel(options: AddSplitviewComponentOptions): void;
46
46
  layout(width: number, height: number): void;
47
47
  onDidLayoutChange: Event<void>;
48
48
  toJSON(): SerializedSplitview;
49
- fromJSON(serializedSplitview: SerializedSplitview, deferComponentLayout?: boolean): void;
49
+ fromJSON(serializedSplitview: SerializedSplitview): void;
50
50
  resizeToFit(): void;
51
51
  focus(): void;
52
52
  getPanel(id: string): ISplitviewPanel | undefined;
@@ -66,6 +66,8 @@ export declare class SplitviewComponent extends CompositeDisposable implements I
66
66
  private _activePanel;
67
67
  private panels;
68
68
  private _options;
69
+ private readonly _onDidLayoutfromJSON;
70
+ readonly onDidLayoutFromJSON: Event<void>;
69
71
  private readonly _onDidAddView;
70
72
  readonly onDidAddView: Event<IView>;
71
73
  private readonly _onDidRemoveView;
@@ -98,6 +100,6 @@ export declare class SplitviewComponent extends CompositeDisposable implements I
98
100
  layout(width: number, height: number): void;
99
101
  private doAddView;
100
102
  toJSON(): SerializedSplitview;
101
- fromJSON(serializedSplitview: SerializedSplitview, deferComponentLayout?: boolean): void;
103
+ fromJSON(serializedSplitview: SerializedSplitview): void;
102
104
  dispose(): void;
103
105
  }
@@ -12,6 +12,8 @@ export class SplitviewComponent extends CompositeDisposable {
12
12
  this.element = element;
13
13
  this._disposable = new MutableDisposable();
14
14
  this.panels = new Map();
15
+ this._onDidLayoutfromJSON = new Emitter();
16
+ this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
15
17
  this._onDidAddView = new Emitter();
16
18
  this.onDidAddView = this._onDidAddView.event;
17
19
  this._onDidRemoveView = new Emitter();
@@ -26,7 +28,7 @@ export class SplitviewComponent extends CompositeDisposable {
26
28
  options.frameworkComponents = {};
27
29
  }
28
30
  this.splitview = new Splitview(this.element, options);
29
- this.addDisposables(this._disposable, this._onDidAddView, this._onDidRemoveView, this._onDidLayoutChange);
31
+ this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
30
32
  }
31
33
  get options() {
32
34
  return this._options;
@@ -102,7 +104,11 @@ export class SplitviewComponent extends CompositeDisposable {
102
104
  }
103
105
  removePanel(panel, sizing) {
104
106
  const disposable = this.panels.get(panel.id);
105
- disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
107
+ if (!disposable) {
108
+ throw new Error(`unknown splitview panel ${panel.id}`);
109
+ }
110
+ disposable.disposable.dispose();
111
+ disposable.value.dispose();
106
112
  this.panels.delete(panel.id);
107
113
  const index = this.getPanels().findIndex((_) => _ === panel);
108
114
  this.splitview.removeView(index, sizing);
@@ -161,7 +167,7 @@ export class SplitviewComponent extends CompositeDisposable {
161
167
  }
162
168
  this.setActive(view, true);
163
169
  });
164
- this.panels.set(view.id, disposable);
170
+ this.panels.set(view.id, { disposable, value: view });
165
171
  }
166
172
  toJSON() {
167
173
  var _a;
@@ -183,8 +189,13 @@ export class SplitviewComponent extends CompositeDisposable {
183
189
  orientation: this.splitview.orientation,
184
190
  };
185
191
  }
186
- fromJSON(serializedSplitview, deferComponentLayout = false) {
192
+ fromJSON(serializedSplitview) {
187
193
  const { views, orientation, size, activeView } = serializedSplitview;
194
+ for (const [_, value] of this.panels.entries()) {
195
+ value.disposable.dispose();
196
+ value.value.dispose();
197
+ }
198
+ this.panels.clear();
188
199
  this.splitview.dispose();
189
200
  const queue = [];
190
201
  this.splitview = new Splitview(this.element, {
@@ -224,26 +235,22 @@ export class SplitviewComponent extends CompositeDisposable {
224
235
  },
225
236
  });
226
237
  this.layout(this.width, this.height);
227
- if (deferComponentLayout) {
228
- setTimeout(() => {
229
- queue.forEach((f) => f());
230
- }, 0);
231
- }
232
- else {
233
- queue.forEach((f) => f());
234
- }
238
+ queue.forEach((f) => f());
235
239
  if (typeof activeView === 'string') {
236
240
  const panel = this.getPanel(activeView);
237
241
  if (panel) {
238
242
  this.setActive(panel);
239
243
  }
240
244
  }
245
+ this._onDidLayoutfromJSON.fire();
241
246
  }
242
247
  dispose() {
243
- Array.from(this.panels.values()).forEach((value) => {
244
- value.dispose();
245
- });
248
+ for (const [_, value] of this.panels.entries()) {
249
+ value.disposable.dispose();
250
+ value.value.dispose();
251
+ }
246
252
  this.panels.clear();
253
+ this.splitview.dispose();
247
254
  super.dispose();
248
255
  }
249
256
  }
@@ -115,25 +115,25 @@
115
115
  }
116
116
  .drop-target > .drop-target-dropzone > .drop-target-selection {
117
117
  position: relative;
118
- pointer-events: none;
119
118
  box-sizing: border-box;
120
119
  height: 100%;
121
120
  width: 100%;
122
121
  background-color: var(--dv-drag-over-background-color);
123
- transition-duration: 0.15s;
124
- transition-timing-function: ease-out;
122
+ transition: top 70ms ease-out, left 70ms ease-out, width 70ms ease-out, height 70ms ease-out, opacity 0.15s ease-out;
123
+ will-change: transform;
124
+ pointer-events: none;
125
125
  }
126
- .drop-target > .drop-target-dropzone > .drop-target-selection.left, .drop-target > .drop-target-dropzone > .drop-target-selection.right {
127
- width: 50%;
126
+ .drop-target > .drop-target-dropzone > .drop-target-selection.left {
127
+ transform: translateX(-25%) scaleX(0.5);
128
128
  }
129
129
  .drop-target > .drop-target-dropzone > .drop-target-selection.right {
130
- transform: translate(100%, 0%);
130
+ transform: translateX(25%) scaleX(0.5);
131
131
  }
132
- .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
133
- transform: translate(0%, 100%);
132
+ .drop-target > .drop-target-dropzone > .drop-target-selection.top {
133
+ transform: translateY(-25%) scaleY(0.5);
134
134
  }
135
- .drop-target > .drop-target-dropzone > .drop-target-selection.top, .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
136
- height: 50%;
135
+ .drop-target > .drop-target-dropzone > .drop-target-selection.bottom {
136
+ transform: translateY(25%) scaleY(0.5);
137
137
  }
138
138
  .drop-target > .drop-target-dropzone > .drop-target-selection.small-top {
139
139
  border-top: 1px solid var(--dv-drag-over-border-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dockview",
3
- "version": "1.1.0",
3
+ "version": "1.3.1",
4
4
  "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
@@ -55,23 +55,23 @@
55
55
  "author": "https://github.com/mathuo",
56
56
  "license": "MIT",
57
57
  "devDependencies": {
58
- "@rollup/plugin-typescript": "^8.3.0",
59
- "@testing-library/react": "^12.1.3",
60
- "@types/react": "^17.0.39",
61
- "@types/react-dom": "^17.0.11",
58
+ "@rollup/plugin-typescript": "^8.3.2",
59
+ "@testing-library/react": "^13.1.0",
60
+ "@types/react": "^18.0.5",
61
+ "@types/react-dom": "^18.0.1",
62
62
  "cross-env": "^7.0.3",
63
- "postcss": "^8.4.6",
64
- "react": "^17.0.1",
65
- "react-dom": "^17.0.1",
63
+ "postcss": "^8.4.12",
64
+ "react": "^18.0.0",
65
+ "react-dom": "^18.0.0",
66
66
  "rimraf": "^3.0.2",
67
- "rollup": "^2.68.0",
67
+ "rollup": "^2.70.2",
68
68
  "rollup-plugin-postcss": "^4.0.2",
69
69
  "rollup-plugin-terser": "^7.0.2",
70
- "typedoc": "^0.22.12"
70
+ "typedoc": "^0.22.15"
71
71
  },
72
72
  "peerDependencies": {
73
- "react": ">=16.8.0",
74
- "react-dom": ">=16.8.0"
73
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
74
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
75
75
  },
76
- "gitHead": "1816476fbbd7c1ec674f20d0df4f443f36124660"
76
+ "gitHead": "432ab10e7f1059918b736b27d5c3ef86c44c4bf3"
77
77
  }