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.
- package/dist/cjs/api/component.api.d.ts +17 -15
- package/dist/cjs/api/component.api.js +22 -22
- package/dist/cjs/api/component.api.js.map +1 -1
- package/dist/cjs/dnd/abstractDragHandler.d.ts +1 -1
- package/dist/cjs/dnd/abstractDragHandler.js +2 -3
- package/dist/cjs/dnd/abstractDragHandler.js.map +1 -1
- package/dist/cjs/dnd/droptarget.js +3 -3
- package/dist/cjs/dnd/droptarget.js.map +1 -1
- package/dist/cjs/dockview/components/tab/defaultTab.d.ts +1 -1
- package/dist/cjs/dockview/components/tab/defaultTab.js +1 -1
- package/dist/cjs/dockview/components/tab/defaultTab.js.map +1 -1
- package/dist/cjs/dockview/components/watermark/watermark.d.ts +3 -3
- package/dist/cjs/dockview/components/watermark/watermark.js +4 -4
- package/dist/cjs/dockview/components/watermark/watermark.js.map +1 -1
- package/dist/cjs/dockview/deserializer.js.map +1 -1
- package/dist/cjs/dockview/dockviewComponent.d.ts +8 -5
- package/dist/cjs/dockview/dockviewComponent.js +60 -41
- package/dist/cjs/dockview/dockviewComponent.js.map +1 -1
- package/dist/cjs/dockview/dockviewGroupPanel.d.ts +1 -0
- package/dist/cjs/dockview/dockviewGroupPanel.js +8 -0
- package/dist/cjs/dockview/dockviewGroupPanel.js.map +1 -1
- package/dist/cjs/gridview/baseComponentGridview.d.ts +3 -20
- package/dist/cjs/gridview/baseComponentGridview.js +35 -43
- package/dist/cjs/gridview/baseComponentGridview.js.map +1 -1
- package/dist/cjs/gridview/basePanelView.js +2 -0
- package/dist/cjs/gridview/basePanelView.js.map +1 -1
- package/dist/cjs/gridview/branchNode.js +2 -2
- package/dist/cjs/gridview/branchNode.js.map +1 -1
- package/dist/cjs/gridview/gridview.js +3 -2
- package/dist/cjs/gridview/gridview.js.map +1 -1
- package/dist/cjs/gridview/gridviewComponent.d.ts +3 -9
- package/dist/cjs/gridview/gridviewComponent.js +30 -18
- package/dist/cjs/gridview/gridviewComponent.js.map +1 -1
- package/dist/cjs/gridview/leafNode.js +1 -1
- package/dist/cjs/gridview/leafNode.js.map +1 -1
- package/dist/cjs/groupview/groupPanel.d.ts +1 -0
- package/dist/cjs/groupview/groupview.d.ts +3 -2
- package/dist/cjs/groupview/groupview.js +15 -6
- package/dist/cjs/groupview/groupview.js.map +1 -1
- package/dist/cjs/groupview/panel/content.d.ts +1 -1
- package/dist/cjs/groupview/panel/content.js +1 -1
- package/dist/cjs/groupview/panel/content.js.map +1 -1
- package/dist/cjs/hostedContainer.js +2 -2
- package/dist/cjs/hostedContainer.js.map +1 -1
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.js +8 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/panel/types.d.ts +1 -0
- package/dist/cjs/paneview/defaultPaneviewHeader.d.ts +1 -1
- package/dist/cjs/paneview/defaultPaneviewHeader.js +1 -1
- package/dist/cjs/paneview/defaultPaneviewHeader.js.map +1 -1
- package/dist/cjs/paneview/draggablePaneviewPanel.js +1 -1
- package/dist/cjs/paneview/draggablePaneviewPanel.js.map +1 -1
- package/dist/cjs/paneview/paneview.d.ts +3 -1
- package/dist/cjs/paneview/paneview.js +12 -6
- package/dist/cjs/paneview/paneview.js.map +1 -1
- package/dist/cjs/paneview/paneviewComponent.d.ts +12 -5
- package/dist/cjs/paneview/paneviewComponent.js +68 -16
- package/dist/cjs/paneview/paneviewComponent.js.map +1 -1
- package/dist/cjs/react/dockview/components.js +5 -1
- package/dist/cjs/react/dockview/components.js.map +1 -1
- package/dist/cjs/react/dockview/dockview.js +32 -10
- package/dist/cjs/react/dockview/dockview.js.map +1 -1
- package/dist/cjs/react/dockview/reactContentPart.d.ts +2 -2
- package/dist/cjs/react/dockview/reactContentPart.js +2 -13
- package/dist/cjs/react/dockview/reactContentPart.js.map +1 -1
- package/dist/cjs/react/dockview/reactHeaderPart.d.ts +2 -2
- package/dist/cjs/react/dockview/reactHeaderPart.js +2 -2
- package/dist/cjs/react/dockview/reactHeaderPart.js.map +1 -1
- package/dist/cjs/react/dockview/reactWatermarkPart.d.ts +2 -2
- package/dist/cjs/react/dockview/reactWatermarkPart.js +2 -2
- package/dist/cjs/react/dockview/reactWatermarkPart.js.map +1 -1
- package/dist/cjs/react/dockview/v2/reactContentRenderer.d.ts +2 -2
- package/dist/cjs/react/dockview/v2/reactContentRenderer.js +2 -2
- package/dist/cjs/react/dockview/v2/reactContentRenderer.js.map +1 -1
- package/dist/cjs/react/dockview/v2/webviewContentRenderer.d.ts +2 -2
- package/dist/cjs/react/dockview/v2/webviewContentRenderer.js +2 -2
- package/dist/cjs/react/dockview/v2/webviewContentRenderer.js.map +1 -1
- package/dist/cjs/react/gridview/gridview.js +9 -2
- package/dist/cjs/react/gridview/gridview.js.map +1 -1
- package/dist/cjs/react/gridview/view.d.ts +3 -2
- package/dist/cjs/react/gridview/view.js.map +1 -1
- package/dist/cjs/react/index.js +5 -1
- package/dist/cjs/react/index.js.map +1 -1
- package/dist/cjs/react/paneview/paneview.js +6 -2
- package/dist/cjs/react/paneview/paneview.js.map +1 -1
- package/dist/cjs/react/react.js +5 -1
- package/dist/cjs/react/react.js.map +1 -1
- package/dist/cjs/react/splitview/splitview.js +8 -2
- package/dist/cjs/react/splitview/splitview.js.map +1 -1
- package/dist/cjs/splitview/core/splitview.js +1 -1
- package/dist/cjs/splitview/core/splitview.js.map +1 -1
- package/dist/cjs/splitview/splitviewComponent.d.ts +5 -3
- package/dist/cjs/splitview/splitviewComponent.js +55 -16
- package/dist/cjs/splitview/splitviewComponent.js.map +1 -1
- package/dist/dockview.amd.js +316 -312
- package/dist/dockview.amd.min.js +2 -2
- package/dist/dockview.amd.min.noStyle.js +2 -2
- package/dist/dockview.amd.noStyle.js +315 -311
- package/dist/dockview.cjs.js +316 -312
- package/dist/dockview.esm.js +316 -306
- package/dist/dockview.esm.min.js +2 -2
- package/dist/dockview.js +316 -312
- package/dist/dockview.min.js +2 -2
- package/dist/dockview.min.noStyle.js +2 -2
- package/dist/dockview.noStyle.js +315 -311
- package/dist/esm/api/component.api.d.ts +17 -15
- package/dist/esm/api/component.api.js +14 -14
- package/dist/esm/dnd/abstractDragHandler.d.ts +1 -1
- package/dist/esm/dnd/abstractDragHandler.js +2 -3
- package/dist/esm/dnd/droptarget.js +3 -3
- package/dist/esm/dockview/components/tab/defaultTab.d.ts +1 -1
- package/dist/esm/dockview/components/tab/defaultTab.js +1 -1
- package/dist/esm/dockview/components/watermark/watermark.d.ts +3 -3
- package/dist/esm/dockview/components/watermark/watermark.js +4 -4
- package/dist/esm/dockview/dockviewComponent.d.ts +8 -5
- package/dist/esm/dockview/dockviewComponent.js +34 -38
- package/dist/esm/dockview/dockviewGroupPanel.d.ts +1 -0
- package/dist/esm/dockview/dockviewGroupPanel.js +4 -0
- package/dist/esm/gridview/baseComponentGridview.d.ts +3 -20
- package/dist/esm/gridview/baseComponentGridview.js +13 -43
- package/dist/esm/gridview/basePanelView.js +2 -0
- package/dist/esm/gridview/branchNode.js +2 -2
- package/dist/esm/gridview/gridview.js +2 -1
- package/dist/esm/gridview/gridviewComponent.d.ts +3 -9
- package/dist/esm/gridview/gridviewComponent.js +9 -19
- package/dist/esm/groupview/groupPanel.d.ts +1 -0
- package/dist/esm/groupview/groupview.d.ts +3 -2
- package/dist/esm/groupview/groupview.js +8 -3
- package/dist/esm/groupview/panel/content.d.ts +1 -1
- package/dist/esm/groupview/panel/content.js +1 -1
- package/dist/esm/hostedContainer.js +2 -2
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +1 -2
- package/dist/esm/panel/types.d.ts +1 -0
- package/dist/esm/paneview/defaultPaneviewHeader.d.ts +1 -1
- package/dist/esm/paneview/defaultPaneviewHeader.js +1 -1
- package/dist/esm/paneview/draggablePaneviewPanel.js +1 -1
- package/dist/esm/paneview/paneview.d.ts +3 -1
- package/dist/esm/paneview/paneview.js +9 -5
- package/dist/esm/paneview/paneviewComponent.d.ts +12 -5
- package/dist/esm/paneview/paneviewComponent.js +34 -15
- package/dist/esm/react/dockview/dockview.js +27 -9
- package/dist/esm/react/dockview/reactContentPart.d.ts +2 -2
- package/dist/esm/react/dockview/reactContentPart.js +2 -13
- package/dist/esm/react/dockview/reactHeaderPart.d.ts +2 -2
- package/dist/esm/react/dockview/reactHeaderPart.js +2 -2
- package/dist/esm/react/dockview/reactWatermarkPart.d.ts +2 -2
- package/dist/esm/react/dockview/reactWatermarkPart.js +2 -2
- package/dist/esm/react/dockview/v2/reactContentRenderer.d.ts +2 -2
- package/dist/esm/react/dockview/v2/reactContentRenderer.js +2 -2
- package/dist/esm/react/dockview/v2/webviewContentRenderer.d.ts +2 -2
- package/dist/esm/react/dockview/v2/webviewContentRenderer.js +2 -2
- package/dist/esm/react/gridview/gridview.js +4 -1
- package/dist/esm/react/gridview/view.d.ts +3 -2
- package/dist/esm/react/paneview/paneview.js +1 -1
- package/dist/esm/react/splitview/splitview.js +3 -1
- package/dist/esm/splitview/core/splitview.js +1 -1
- package/dist/esm/splitview/splitviewComponent.d.ts +5 -3
- package/dist/esm/splitview/splitviewComponent.js +22 -15
- package/dist/styles/dockview.css +10 -10
- 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
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
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
|
-
|
|
247
|
-
|
|
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: (
|
|
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: (
|
|
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: (
|
|
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,
|
|
44
|
-
layout(
|
|
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,
|
|
48
|
+
updateParentGroup(group, _isPanelVisible) {
|
|
55
49
|
this._group = group;
|
|
56
50
|
}
|
|
57
|
-
layout(
|
|
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(
|
|
22
|
-
updateParentGroup(
|
|
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(
|
|
32
|
+
layout(_width, _height) {
|
|
33
33
|
// noop - retrieval from api
|
|
34
34
|
}
|
|
35
|
-
updateParentGroup(
|
|
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(
|
|
27
|
-
updateParentGroup(group: GroupviewPanel,
|
|
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(
|
|
44
|
+
layout(_width, _height) {
|
|
45
45
|
// noop - retrieval from api
|
|
46
46
|
}
|
|
47
|
-
updateParentGroup(group,
|
|
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,
|
|
27
|
-
layout(
|
|
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,
|
|
59
|
+
updateParentGroup(group, _isPanelVisible) {
|
|
60
60
|
this._group = group;
|
|
61
61
|
}
|
|
62
|
-
layout(
|
|
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(
|
|
16
|
-
layout(
|
|
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(
|
|
27
|
+
updateParentGroup(_group, _isPanelVisible) {
|
|
28
28
|
//
|
|
29
29
|
}
|
|
30
|
-
layout(
|
|
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:
|
|
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 {
|
|
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():
|
|
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,
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
}
|
package/dist/styles/dockview.css
CHANGED
|
@@ -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
|
|
124
|
-
|
|
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
|
|
127
|
-
|
|
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:
|
|
130
|
+
transform: translateX(25%) scaleX(0.5);
|
|
131
131
|
}
|
|
132
|
-
.drop-target > .drop-target-dropzone > .drop-target-selection.
|
|
133
|
-
transform:
|
|
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.
|
|
136
|
-
|
|
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
|
|
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.
|
|
59
|
-
"@testing-library/react": "^
|
|
60
|
-
"@types/react": "^
|
|
61
|
-
"@types/react-dom": "^
|
|
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.
|
|
64
|
-
"react": "^
|
|
65
|
-
"react-dom": "^
|
|
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.
|
|
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.
|
|
70
|
+
"typedoc": "^0.22.15"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
|
-
"react": "
|
|
74
|
-
"react-dom": "
|
|
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": "
|
|
76
|
+
"gitHead": "432ab10e7f1059918b736b27d5c3ef86c44c4bf3"
|
|
77
77
|
}
|