dockview-core 7.0.2 → 7.0.3
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/dockviewGroupPanelApi.js +1 -1
- package/dist/cjs/dnd/dropTargetAnchorContainer.js +1 -2
- package/dist/cjs/dnd/pointer/longPress.js +1 -1
- package/dist/cjs/dnd/pointer/pointerDragController.js +9 -7
- package/dist/cjs/dnd/pointer/pointerDragSource.js +4 -2
- package/dist/cjs/dockview/components/panel/content.js +6 -6
- package/dist/cjs/dockview/components/popupService.js +1 -1
- package/dist/cjs/dockview/components/tab/tab.js +2 -2
- package/dist/cjs/dockview/components/titlebar/floatingTitleBar.d.ts +1 -2
- package/dist/cjs/dockview/components/titlebar/groupDragSource.d.ts +1 -2
- package/dist/cjs/dockview/components/titlebar/groupDragSource.js +1 -1
- package/dist/cjs/dockview/components/titlebar/tabGroupIndicator.js +5 -6
- package/dist/cjs/dockview/components/titlebar/tabGroups.d.ts +27 -5
- package/dist/cjs/dockview/components/titlebar/tabGroups.js +104 -54
- package/dist/cjs/dockview/components/titlebar/tabs.js +16 -23
- package/dist/cjs/dockview/components/titlebar/voidContainer.js +1 -1
- package/dist/cjs/dockview/dndCapabilities.js +3 -3
- package/dist/cjs/dockview/dockviewComponent.d.ts +5 -5
- package/dist/cjs/dockview/dockviewComponent.js +140 -122
- package/dist/cjs/dockview/dockviewGroupPanel.d.ts +1 -1
- package/dist/cjs/dockview/dockviewGroupPanelModel.js +19 -25
- package/dist/cjs/dockview/dockviewPanel.js +4 -5
- package/dist/cjs/dockview/dockviewShell.d.ts +29 -7
- package/dist/cjs/dockview/dockviewShell.js +94 -36
- package/dist/cjs/dockview/strictEventsSequencing.js +6 -6
- package/dist/cjs/dockview/tabGroup.js +3 -3
- package/dist/cjs/dockview/tabGroupAccent.js +1 -3
- package/dist/cjs/dom.js +1 -1
- package/dist/cjs/events.js +1 -1
- package/dist/cjs/gridview/baseComponentGridview.js +3 -8
- package/dist/cjs/gridview/branchNode.js +13 -17
- package/dist/cjs/gridview/gridview.js +8 -8
- package/dist/cjs/gridview/gridviewComponent.js +1 -6
- package/dist/cjs/overlay/overlay.js +25 -28
- package/dist/cjs/overlay/overlayRenderContainer.js +3 -4
- package/dist/cjs/paneview/draggablePaneviewPanel.js +1 -1
- package/dist/cjs/paneview/paneviewComponent.js +2 -6
- package/dist/cjs/popoutWindow.js +4 -4
- package/dist/cjs/scrollbar.d.ts +1 -1
- package/dist/cjs/scrollbar.js +7 -6
- package/dist/cjs/splitview/splitview.d.ts +1 -1
- package/dist/cjs/splitview/splitview.js +21 -20
- package/dist/cjs/splitview/viewItem.js +1 -1
- package/dist/dockview-core.js +413 -330
- package/dist/dockview-core.min.js +2 -2
- package/dist/dockview-core.min.js.map +1 -1
- package/dist/dockview-core.min.noStyle.js +2 -2
- package/dist/dockview-core.min.noStyle.js.map +1 -1
- package/dist/dockview-core.noStyle.js +412 -329
- package/dist/esm/api/dockviewGroupPanelApi.js +1 -1
- package/dist/esm/dnd/dropTargetAnchorContainer.js +1 -2
- package/dist/esm/dnd/pointer/longPress.js +1 -1
- package/dist/esm/dnd/pointer/pointerDragController.js +9 -7
- package/dist/esm/dnd/pointer/pointerDragSource.js +4 -2
- package/dist/esm/dockview/components/panel/content.js +6 -6
- package/dist/esm/dockview/components/popupService.js +1 -1
- package/dist/esm/dockview/components/tab/tab.js +2 -2
- package/dist/esm/dockview/components/titlebar/floatingTitleBar.d.ts +1 -2
- package/dist/esm/dockview/components/titlebar/groupDragSource.d.ts +1 -2
- package/dist/esm/dockview/components/titlebar/groupDragSource.js +1 -1
- package/dist/esm/dockview/components/titlebar/tabGroupIndicator.js +5 -6
- package/dist/esm/dockview/components/titlebar/tabGroups.d.ts +27 -5
- package/dist/esm/dockview/components/titlebar/tabGroups.js +91 -42
- package/dist/esm/dockview/components/titlebar/tabs.js +17 -24
- package/dist/esm/dockview/components/titlebar/voidContainer.js +1 -1
- package/dist/esm/dockview/dndCapabilities.js +3 -3
- package/dist/esm/dockview/dockviewComponent.d.ts +5 -5
- package/dist/esm/dockview/dockviewComponent.js +61 -51
- package/dist/esm/dockview/dockviewGroupPanel.d.ts +1 -1
- package/dist/esm/dockview/dockviewGroupPanelModel.js +19 -25
- package/dist/esm/dockview/dockviewPanel.js +1 -2
- package/dist/esm/dockview/dockviewShell.d.ts +29 -7
- package/dist/esm/dockview/dockviewShell.js +89 -37
- package/dist/esm/dockview/strictEventsSequencing.js +6 -6
- package/dist/esm/dockview/tabGroup.js +3 -3
- package/dist/esm/dockview/tabGroupAccent.js +1 -3
- package/dist/esm/dom.js +1 -1
- package/dist/esm/events.js +1 -1
- package/dist/esm/gridview/baseComponentGridview.js +3 -8
- package/dist/esm/gridview/branchNode.js +13 -15
- package/dist/esm/gridview/gridview.js +8 -8
- package/dist/esm/gridview/gridviewComponent.js +1 -6
- package/dist/esm/overlay/overlay.js +25 -28
- package/dist/esm/overlay/overlayRenderContainer.js +3 -4
- package/dist/esm/paneview/draggablePaneviewPanel.js +1 -1
- package/dist/esm/paneview/paneviewComponent.js +2 -6
- package/dist/esm/popoutWindow.js +4 -4
- package/dist/esm/scrollbar.d.ts +1 -1
- package/dist/esm/scrollbar.js +7 -6
- package/dist/esm/splitview/splitview.d.ts +1 -1
- package/dist/esm/splitview/splitview.js +21 -20
- package/dist/esm/splitview/viewItem.js +1 -1
- package/dist/package/main.cjs.js +412 -329
- package/dist/package/main.cjs.min.js +2 -2
- package/dist/package/main.esm.min.mjs +2 -2
- package/dist/package/main.esm.mjs +412 -329
- package/dist/styles/dockview.css +8 -8
- package/package.json +1 -1
|
@@ -1,18 +1,32 @@
|
|
|
1
1
|
import { Emitter } from '../events';
|
|
2
2
|
import { CompositeDisposable } from '../lifecycle';
|
|
3
3
|
import { LayoutPriority, Orientation, Splitview, } from '../splitview/splitview';
|
|
4
|
-
import { watchElementResize } from '../dom';
|
|
4
|
+
import { isInDocument, watchElementResize } from '../dom';
|
|
5
5
|
export class EdgeGroupView {
|
|
6
|
+
/**
|
|
7
|
+
* The effective (pre-gap) collapsed size: the measured tab-strip size when
|
|
8
|
+
* available, otherwise the configured/theme base.
|
|
9
|
+
*/
|
|
10
|
+
get _effectiveBaseCollapsed() {
|
|
11
|
+
var _a;
|
|
12
|
+
return (_a = this._measuredTabSize) !== null && _a !== void 0 ? _a : this._baseCollapsedSize;
|
|
13
|
+
}
|
|
6
14
|
get minimumSize() {
|
|
7
15
|
// When collapsed, lock size to collapsedSize so sash can't drag it open
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
16
|
+
if (this._isCollapsed) {
|
|
17
|
+
return this.collapsedSize;
|
|
18
|
+
}
|
|
19
|
+
// If the caller explicitly provides a minimumSize, respect it.
|
|
20
|
+
// Otherwise fall back to collapsedSize + 50 so the expanded state is
|
|
21
|
+
// visually distinguishable from the collapsed state.
|
|
22
|
+
return this._baseMinimumSize !== undefined
|
|
23
|
+
? this._baseMinimumSize + this._gapAdd
|
|
24
|
+
: this._effectiveBaseCollapsed + 50 + this._gapAdd;
|
|
11
25
|
}
|
|
12
26
|
get maximumSize() {
|
|
13
27
|
// When collapsed, lock size to collapsedSize so sash can't drag it open
|
|
14
28
|
return this._isCollapsed
|
|
15
|
-
? this.
|
|
29
|
+
? this.collapsedSize
|
|
16
30
|
: this._expandedMaximumSize;
|
|
17
31
|
}
|
|
18
32
|
get element() {
|
|
@@ -25,34 +39,62 @@ export class EdgeGroupView {
|
|
|
25
39
|
return this._lastExpandedSize;
|
|
26
40
|
}
|
|
27
41
|
get collapsedSize() {
|
|
28
|
-
return this.
|
|
42
|
+
return this._effectiveBaseCollapsed + this._gapAdd;
|
|
29
43
|
}
|
|
30
|
-
constructor(options, group, orientation) {
|
|
44
|
+
constructor(options, group, orientation, gapAdd = 0) {
|
|
31
45
|
var _a, _b, _c;
|
|
32
46
|
this._onDidChange = new Emitter();
|
|
33
47
|
this.onDidChange = this._onDidChange.event;
|
|
34
48
|
this.snap = false;
|
|
35
49
|
this.priority = LayoutPriority.Low;
|
|
36
50
|
this._isCollapsed = false;
|
|
51
|
+
this._tabSizeDisposables = new CompositeDisposable();
|
|
37
52
|
this._group = group;
|
|
38
53
|
this._orientation = orientation;
|
|
39
54
|
group.element.classList.add('dv-edge-group');
|
|
40
55
|
group.element.dataset.testid = `dv-edge-group-${options.id}`;
|
|
41
|
-
this.
|
|
56
|
+
this._baseCollapsedSize = (_a = options.collapsedSize) !== null && _a !== void 0 ? _a : 35;
|
|
57
|
+
this._baseMinimumSize = options.minimumSize;
|
|
58
|
+
this._gapAdd = gapAdd;
|
|
42
59
|
this._expandedMaximumSize =
|
|
43
60
|
(_b = options.maximumSize) !== null && _b !== void 0 ? _b : Number.POSITIVE_INFINITY;
|
|
44
|
-
// If the caller explicitly provides a minimumSize, respect it.
|
|
45
|
-
// Otherwise fall back to collapsedSize + 50 so the expanded state is
|
|
46
|
-
// visually distinguishable from the collapsed state.
|
|
47
|
-
this._expandedMinimumSize =
|
|
48
|
-
options.minimumSize !== undefined
|
|
49
|
-
? options.minimumSize
|
|
50
|
-
: this._collapsedSize + 50;
|
|
51
61
|
this._lastExpandedSize = (_c = options.initialSize) !== null && _c !== void 0 ? _c : 200;
|
|
52
62
|
if (options.collapsed) {
|
|
53
63
|
this._isCollapsed = true;
|
|
54
64
|
group.element.classList.add('dv-edge-collapsed');
|
|
55
65
|
}
|
|
66
|
+
this._observeTabStrip();
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Watch the group's tab strip so the collapsed size follows the live tab
|
|
70
|
+
* height. The strip's cross-axis size (height for top/bottom, width for
|
|
71
|
+
* left/right) is exactly what a collapsed edge group should occupy; a
|
|
72
|
+
* ResizeObserver keeps them in sync when the tab height changes at runtime.
|
|
73
|
+
*/
|
|
74
|
+
_observeTabStrip() {
|
|
75
|
+
const strip = this._group.element.querySelector('.dv-tabs-and-actions-container');
|
|
76
|
+
if (!strip) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
this._tabSizeDisposables.addDisposables(watchElementResize(strip, () => {
|
|
80
|
+
this._applyMeasuredTabSize(this._orientation === 'vertical'
|
|
81
|
+
? strip.offsetHeight
|
|
82
|
+
: strip.offsetWidth);
|
|
83
|
+
}));
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Apply a freshly-measured tab-strip cross size. When the group is
|
|
87
|
+
* collapsed this resizes it in the parent splitview so the collapsed strip
|
|
88
|
+
* always shows the full tab height.
|
|
89
|
+
*/
|
|
90
|
+
_applyMeasuredTabSize(size) {
|
|
91
|
+
if (size <= 0 || size === this._measuredTabSize) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
this._measuredTabSize = size;
|
|
95
|
+
if (this._isCollapsed) {
|
|
96
|
+
this._onDidChange.fire({ size: this.collapsedSize });
|
|
97
|
+
}
|
|
56
98
|
}
|
|
57
99
|
layout(size, orthogonalSize) {
|
|
58
100
|
// Track the last expanded size so we can restore it after collapsing
|
|
@@ -88,15 +130,18 @@ export class EdgeGroupView {
|
|
|
88
130
|
this._lastExpandedSize = size;
|
|
89
131
|
}
|
|
90
132
|
/**
|
|
91
|
-
* Apply new
|
|
92
|
-
* or gap change.
|
|
93
|
-
*
|
|
133
|
+
* Apply a new base (pre-gap) collapsed size, base minimum size and gap
|
|
134
|
+
* contribution after a theme or gap change. Base values come from the
|
|
135
|
+
* original config; the ShellManager owns the gap arithmetic. A live
|
|
136
|
+
* measured tab size (if any) continues to win over the base collapsed size.
|
|
94
137
|
*/
|
|
95
|
-
|
|
96
|
-
this.
|
|
97
|
-
this.
|
|
138
|
+
updateSizing(baseCollapsedSize, baseMinimumSize, gapAdd) {
|
|
139
|
+
this._baseCollapsedSize = baseCollapsedSize;
|
|
140
|
+
this._baseMinimumSize = baseMinimumSize;
|
|
141
|
+
this._gapAdd = gapAdd;
|
|
98
142
|
}
|
|
99
143
|
dispose() {
|
|
144
|
+
this._tabSizeDisposables.dispose();
|
|
100
145
|
this._onDidChange.dispose();
|
|
101
146
|
}
|
|
102
147
|
}
|
|
@@ -228,15 +273,6 @@ class MiddleColumnView {
|
|
|
228
273
|
this._splitview.dispose();
|
|
229
274
|
}
|
|
230
275
|
}
|
|
231
|
-
function adjustedOpts(base, defaultCollapsed, gapAdd) {
|
|
232
|
-
var _a;
|
|
233
|
-
const effectiveCollapsed = ((_a = base.collapsedSize) !== null && _a !== void 0 ? _a : defaultCollapsed) + gapAdd;
|
|
234
|
-
const result = Object.assign(Object.assign({}, base), { collapsedSize: effectiveCollapsed });
|
|
235
|
-
if (base.minimumSize !== undefined) {
|
|
236
|
-
result.minimumSize = base.minimumSize + gapAdd;
|
|
237
|
-
}
|
|
238
|
-
return result;
|
|
239
|
-
}
|
|
240
276
|
export class ShellManager {
|
|
241
277
|
constructor(container, dockviewElement, layoutGrid, gap = 0, defaultCollapsedSize = 35) {
|
|
242
278
|
this._disposables = new CompositeDisposable();
|
|
@@ -262,6 +298,26 @@ export class ShellManager {
|
|
|
262
298
|
this._middleIndex = 0;
|
|
263
299
|
this._outerSplitview.addView(this._middleColumn, { type: 'distribute' }, 0);
|
|
264
300
|
this._disposables.addDisposables(watchElementResize(this._shellElement, (entry) => {
|
|
301
|
+
/**
|
|
302
|
+
* When the shell (or an ancestor) becomes hidden — e.g. a
|
|
303
|
+
* nested dockview whose `onlyWhenVisible` host panel is
|
|
304
|
+
* deactivated — the element collapses to (0, 0) or is detached
|
|
305
|
+
* from the DOM. Propagating that zero size would relayout the
|
|
306
|
+
* edge-group splitview at 0, clamping the low-priority edge
|
|
307
|
+
* groups down to their minimum size and destroying the user's
|
|
308
|
+
* sizing. Skip these cases so sizes are preserved while hidden;
|
|
309
|
+
* mirrors the guard in the `Resizable` base class. See #1495.
|
|
310
|
+
*
|
|
311
|
+
* offsetParent === null is equivalent to display: none on the
|
|
312
|
+
* element or one of its ancestors.
|
|
313
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
|
|
314
|
+
*/
|
|
315
|
+
if (!this._shellElement.offsetParent) {
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
if (!isInDocument(this._shellElement)) {
|
|
319
|
+
return;
|
|
320
|
+
}
|
|
265
321
|
const width = Math.round(entry.contentRect.width);
|
|
266
322
|
const height = Math.round(entry.contentRect.height);
|
|
267
323
|
if (width === this._currentWidth &&
|
|
@@ -298,7 +354,7 @@ export class ShellManager {
|
|
|
298
354
|
const isHorizontal = position === 'left' || position === 'right';
|
|
299
355
|
const gapAdd = isHorizontal ? outerGapAdd : innerGapAdd;
|
|
300
356
|
const orientation = isHorizontal ? 'horizontal' : 'vertical';
|
|
301
|
-
const view = new EdgeGroupView(
|
|
357
|
+
const view = new EdgeGroupView(Object.assign({ collapsedSize: this._defaultCollapsedSize }, options), group, orientation, gapAdd);
|
|
302
358
|
const initialSize = view.isCollapsed
|
|
303
359
|
? view.collapsedSize
|
|
304
360
|
: view.lastExpandedSize;
|
|
@@ -365,10 +421,7 @@ export class ShellManager {
|
|
|
365
421
|
const updateView = (view, baseCfg, gapAdd) => {
|
|
366
422
|
var _a;
|
|
367
423
|
const baseCS = (_a = baseCfg.collapsedSize) !== null && _a !== void 0 ? _a : defaultCollapsedSize;
|
|
368
|
-
|
|
369
|
-
const baseMS = baseCfg.minimumSize;
|
|
370
|
-
const newMS = baseMS !== undefined ? baseMS + gapAdd : newCS + 50;
|
|
371
|
-
view.updateCollapsedSize(newCS, newMS);
|
|
424
|
+
view.updateSizing(baseCS, baseCfg.minimumSize, gapAdd);
|
|
372
425
|
};
|
|
373
426
|
const topCfg = this._viewConfigs.get('top');
|
|
374
427
|
if (this._topView && topCfg) {
|
|
@@ -619,8 +672,7 @@ export class ShellManager {
|
|
|
619
672
|
}
|
|
620
673
|
}
|
|
621
674
|
dispose() {
|
|
622
|
-
var _a;
|
|
623
675
|
this._disposables.dispose();
|
|
624
|
-
|
|
676
|
+
this._shellElement.remove();
|
|
625
677
|
}
|
|
626
678
|
}
|
|
@@ -16,11 +16,11 @@ export class StrictEventsSequencing extends CompositeDisposable {
|
|
|
16
16
|
panels.add(panel.api.id);
|
|
17
17
|
}
|
|
18
18
|
}), this.accessor.onDidRemovePanel((panel) => {
|
|
19
|
-
if (
|
|
20
|
-
|
|
19
|
+
if (panels.has(panel.api.id)) {
|
|
20
|
+
panels.delete(panel.api.id);
|
|
21
21
|
}
|
|
22
22
|
else {
|
|
23
|
-
|
|
23
|
+
throw new Error(`dockview: Invalid event sequence. [onDidRemovePanel] called for panel ${panel.api.id} but panel does not exists`);
|
|
24
24
|
}
|
|
25
25
|
}), this.accessor.onDidAddGroup((group) => {
|
|
26
26
|
if (groups.has(group.api.id)) {
|
|
@@ -30,11 +30,11 @@ export class StrictEventsSequencing extends CompositeDisposable {
|
|
|
30
30
|
groups.add(group.api.id);
|
|
31
31
|
}
|
|
32
32
|
}), this.accessor.onDidRemoveGroup((group) => {
|
|
33
|
-
if (
|
|
34
|
-
|
|
33
|
+
if (groups.has(group.api.id)) {
|
|
34
|
+
groups.delete(group.api.id);
|
|
35
35
|
}
|
|
36
36
|
else {
|
|
37
|
-
|
|
37
|
+
throw new Error(`dockview: Invalid event sequence. [onDidRemoveGroup] called for group ${group.api.id} but group does not exists`);
|
|
38
38
|
}
|
|
39
39
|
}));
|
|
40
40
|
}
|
|
@@ -74,9 +74,9 @@ export class TabGroup extends CompositeDisposable {
|
|
|
74
74
|
if (this._panelIds.includes(panelId)) {
|
|
75
75
|
return;
|
|
76
76
|
}
|
|
77
|
-
const insertIndex = index
|
|
78
|
-
?
|
|
79
|
-
: this._panelIds.length;
|
|
77
|
+
const insertIndex = index === undefined
|
|
78
|
+
? this._panelIds.length
|
|
79
|
+
: Math.max(0, Math.min(index, this._panelIds.length));
|
|
80
80
|
this._panelIds.splice(insertIndex, 0, panelId);
|
|
81
81
|
this._onDidPanelChange.fire({ panelId, type: 'add' });
|
|
82
82
|
}
|
|
@@ -87,9 +87,7 @@ let _fallbackPalette;
|
|
|
87
87
|
* palette through.
|
|
88
88
|
*/
|
|
89
89
|
function getFallbackPalette() {
|
|
90
|
-
|
|
91
|
-
_fallbackPalette = new TabGroupColorPalette(DEFAULT_TAB_GROUP_COLORS, true);
|
|
92
|
-
}
|
|
90
|
+
_fallbackPalette !== null && _fallbackPalette !== void 0 ? _fallbackPalette : (_fallbackPalette = new TabGroupColorPalette(DEFAULT_TAB_GROUP_COLORS, true));
|
|
93
91
|
return _fallbackPalette;
|
|
94
92
|
}
|
|
95
93
|
/**
|
package/dist/esm/dom.js
CHANGED
package/dist/esm/events.js
CHANGED
|
@@ -56,7 +56,7 @@ class LeakageMonitor {
|
|
|
56
56
|
class Stacktrace {
|
|
57
57
|
static create() {
|
|
58
58
|
var _a;
|
|
59
|
-
return new Stacktrace((_a = new Error().stack) !== null && _a !== void 0 ? _a : '');
|
|
59
|
+
return new Stacktrace((_a = new Error('listener stacktrace').stack) !== null && _a !== void 0 ? _a : '');
|
|
60
60
|
}
|
|
61
61
|
constructor(value) {
|
|
62
62
|
this.value = value;
|
|
@@ -93,8 +93,7 @@ export class BaseGrid extends Resizable {
|
|
|
93
93
|
}), this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
|
|
94
94
|
this.forceRelayout();
|
|
95
95
|
}), Disposable.from(() => {
|
|
96
|
-
|
|
97
|
-
(_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
|
|
96
|
+
this.element.remove();
|
|
98
97
|
}), this.gridview.onDidChange(() => {
|
|
99
98
|
this._bufferOnDidLayoutChange.fire();
|
|
100
99
|
}), Event.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
|
|
@@ -189,9 +188,7 @@ export class BaseGrid extends Resizable {
|
|
|
189
188
|
}
|
|
190
189
|
moveToNext(options) {
|
|
191
190
|
var _a;
|
|
192
|
-
|
|
193
|
-
options = {};
|
|
194
|
-
}
|
|
191
|
+
options !== null && options !== void 0 ? options : (options = {});
|
|
195
192
|
if (!options.group) {
|
|
196
193
|
if (!this.activeGroup) {
|
|
197
194
|
return;
|
|
@@ -204,9 +201,7 @@ export class BaseGrid extends Resizable {
|
|
|
204
201
|
}
|
|
205
202
|
moveToPrevious(options) {
|
|
206
203
|
var _a;
|
|
207
|
-
|
|
208
|
-
options = {};
|
|
209
|
-
}
|
|
204
|
+
options !== null && options !== void 0 ? options : (options = {});
|
|
210
205
|
if (!options.group) {
|
|
211
206
|
if (!this.activeGroup) {
|
|
212
207
|
return;
|
|
@@ -65,13 +65,11 @@ export class BranchNode extends CompositeDisposable {
|
|
|
65
65
|
if (this.children.length === 0) {
|
|
66
66
|
return LayoutPriority.Normal;
|
|
67
67
|
}
|
|
68
|
-
const priorities = this.children.map((c) =>
|
|
69
|
-
|
|
70
|
-
: c.priority);
|
|
71
|
-
if (priorities.some((p) => p === LayoutPriority.High)) {
|
|
68
|
+
const priorities = new Set(this.children.map((c) => { var _a; return (_a = c.priority) !== null && _a !== void 0 ? _a : LayoutPriority.Normal; }));
|
|
69
|
+
if (priorities.has(LayoutPriority.High)) {
|
|
72
70
|
return LayoutPriority.High;
|
|
73
71
|
}
|
|
74
|
-
else if (priorities.
|
|
72
|
+
else if (priorities.has(LayoutPriority.Low)) {
|
|
75
73
|
return LayoutPriority.Low;
|
|
76
74
|
}
|
|
77
75
|
return LayoutPriority.Normal;
|
|
@@ -108,16 +106,7 @@ export class BranchNode extends CompositeDisposable {
|
|
|
108
106
|
this._size = size;
|
|
109
107
|
this.element = document.createElement('div');
|
|
110
108
|
this.element.className = 'dv-branch-node';
|
|
111
|
-
if (
|
|
112
|
-
this.splitview = new Splitview(this.element, {
|
|
113
|
-
orientation: this.orientation,
|
|
114
|
-
proportionalLayout,
|
|
115
|
-
styles,
|
|
116
|
-
margin,
|
|
117
|
-
});
|
|
118
|
-
this.splitview.layout(this.size, this.orthogonalSize);
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
109
|
+
if (childDescriptors) {
|
|
121
110
|
const descriptor = {
|
|
122
111
|
views: childDescriptors.map((childDescriptor) => {
|
|
123
112
|
return {
|
|
@@ -140,6 +129,15 @@ export class BranchNode extends CompositeDisposable {
|
|
|
140
129
|
margin,
|
|
141
130
|
});
|
|
142
131
|
}
|
|
132
|
+
else {
|
|
133
|
+
this.splitview = new Splitview(this.element, {
|
|
134
|
+
orientation: this.orientation,
|
|
135
|
+
proportionalLayout,
|
|
136
|
+
styles,
|
|
137
|
+
margin,
|
|
138
|
+
});
|
|
139
|
+
this.splitview.layout(this.size, this.orthogonalSize);
|
|
140
|
+
}
|
|
143
141
|
this.disabled = disabled;
|
|
144
142
|
this.addDisposables(this._onDidChange, this._onDidVisibilityChange, this.splitview.onDidSashEnd(() => {
|
|
145
143
|
this._onDidChange.fire({});
|
|
@@ -383,7 +383,7 @@ export class Gridview {
|
|
|
383
383
|
if (oldRoot) {
|
|
384
384
|
oldRoot.dispose();
|
|
385
385
|
this._maximizedNode = undefined;
|
|
386
|
-
|
|
386
|
+
oldRoot.element.remove();
|
|
387
387
|
}
|
|
388
388
|
this._root = root;
|
|
389
389
|
this.element.appendChild(this._root.element);
|
|
@@ -477,7 +477,7 @@ export class Gridview {
|
|
|
477
477
|
progmaticSelect(location, reverse = false) {
|
|
478
478
|
const [path, node] = this.getNode(location);
|
|
479
479
|
if (!(node instanceof LeafNode)) {
|
|
480
|
-
throw new
|
|
480
|
+
throw new TypeError('invalid location');
|
|
481
481
|
}
|
|
482
482
|
for (let i = path.length - 1; i > -1; i--) {
|
|
483
483
|
const n = path[i];
|
|
@@ -514,7 +514,7 @@ export class Gridview {
|
|
|
514
514
|
const [rest, index] = tail(location);
|
|
515
515
|
const [, parent] = this.getNode(rest);
|
|
516
516
|
if (!(parent instanceof BranchNode)) {
|
|
517
|
-
throw new
|
|
517
|
+
throw new TypeError('Invalid from location');
|
|
518
518
|
}
|
|
519
519
|
return parent.isChildVisible(index);
|
|
520
520
|
}
|
|
@@ -525,7 +525,7 @@ export class Gridview {
|
|
|
525
525
|
const [rest, index] = tail(location);
|
|
526
526
|
const [, parent] = this.getNode(rest);
|
|
527
527
|
if (!(parent instanceof BranchNode)) {
|
|
528
|
-
throw new
|
|
528
|
+
throw new TypeError('Invalid from location');
|
|
529
529
|
}
|
|
530
530
|
this._onDidViewVisibilityChange.fire();
|
|
531
531
|
parent.setChildVisible(index, visible);
|
|
@@ -536,7 +536,7 @@ export class Gridview {
|
|
|
536
536
|
}
|
|
537
537
|
const [, parent] = this.getNode(parentLocation);
|
|
538
538
|
if (!(parent instanceof BranchNode)) {
|
|
539
|
-
throw new
|
|
539
|
+
throw new TypeError('Invalid location');
|
|
540
540
|
}
|
|
541
541
|
parent.moveChild(from, to);
|
|
542
542
|
}
|
|
@@ -582,11 +582,11 @@ export class Gridview {
|
|
|
582
582
|
const [rest, index] = tail(location);
|
|
583
583
|
const [pathToParent, parent] = this.getNode(rest);
|
|
584
584
|
if (!(parent instanceof BranchNode)) {
|
|
585
|
-
throw new
|
|
585
|
+
throw new TypeError('Invalid location');
|
|
586
586
|
}
|
|
587
587
|
const nodeToRemove = parent.children[index];
|
|
588
588
|
if (!(nodeToRemove instanceof LeafNode)) {
|
|
589
|
-
throw new
|
|
589
|
+
throw new TypeError('Invalid location');
|
|
590
590
|
}
|
|
591
591
|
parent.removeChild(index, sizing);
|
|
592
592
|
nodeToRemove.dispose();
|
|
@@ -668,7 +668,7 @@ export class Gridview {
|
|
|
668
668
|
return [path, node];
|
|
669
669
|
}
|
|
670
670
|
if (!(node instanceof BranchNode)) {
|
|
671
|
-
throw new
|
|
671
|
+
throw new TypeError('Invalid location');
|
|
672
672
|
}
|
|
673
673
|
const [index, ...rest] = location;
|
|
674
674
|
if (index < 0 || index >= node.children.length) {
|
|
@@ -220,12 +220,7 @@ export class GridviewComponent extends BaseGrid {
|
|
|
220
220
|
}
|
|
221
221
|
this._groups.forEach((groupItem) => {
|
|
222
222
|
const group = groupItem.value;
|
|
223
|
-
|
|
224
|
-
group.setActive(false);
|
|
225
|
-
}
|
|
226
|
-
else {
|
|
227
|
-
group.setActive(true);
|
|
228
|
-
}
|
|
223
|
+
group.setActive(group === panel);
|
|
229
224
|
});
|
|
230
225
|
}));
|
|
231
226
|
this._groups.set(panel.id, {
|
|
@@ -158,19 +158,19 @@ export class Overlay extends CompositeDisposable {
|
|
|
158
158
|
const element = this._element.getBoundingClientRect();
|
|
159
159
|
const result = {};
|
|
160
160
|
if (this.verticalAlignment === 'top') {
|
|
161
|
-
result.top = parseFloat(this._element.style.top);
|
|
161
|
+
result.top = Number.parseFloat(this._element.style.top);
|
|
162
162
|
}
|
|
163
163
|
else if (this.verticalAlignment === 'bottom') {
|
|
164
|
-
result.bottom = parseFloat(this._element.style.bottom);
|
|
164
|
+
result.bottom = Number.parseFloat(this._element.style.bottom);
|
|
165
165
|
}
|
|
166
166
|
else {
|
|
167
167
|
result.top = element.top - container.top;
|
|
168
168
|
}
|
|
169
169
|
if (this.horiziontalAlignment === 'left') {
|
|
170
|
-
result.left = parseFloat(this._element.style.left);
|
|
170
|
+
result.left = Number.parseFloat(this._element.style.left);
|
|
171
171
|
}
|
|
172
172
|
else if (this.horiziontalAlignment === 'right') {
|
|
173
|
-
result.right = parseFloat(this._element.style.right);
|
|
173
|
+
result.right = Number.parseFloat(this._element.style.right);
|
|
174
174
|
}
|
|
175
175
|
else {
|
|
176
176
|
result.left = element.left - container.left;
|
|
@@ -234,7 +234,7 @@ export class Overlay extends CompositeDisposable {
|
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
236
|
},
|
|
237
|
-
}, addDisposableListener(window, 'pointermove', (e) => {
|
|
237
|
+
}, addDisposableListener(globalThis.window, 'pointermove', (e) => {
|
|
238
238
|
if (this._dragCancelled) {
|
|
239
239
|
return;
|
|
240
240
|
}
|
|
@@ -243,12 +243,10 @@ export class Overlay extends CompositeDisposable {
|
|
|
243
243
|
const y = e.clientY - containerRect.top;
|
|
244
244
|
toggleClass(this._element, 'dv-resize-container-dragging', true);
|
|
245
245
|
const overlayRect = this._element.getBoundingClientRect();
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
};
|
|
251
|
-
}
|
|
246
|
+
offset !== null && offset !== void 0 ? offset : (offset = {
|
|
247
|
+
x: e.clientX - overlayRect.left,
|
|
248
|
+
y: e.clientY - overlayRect.top,
|
|
249
|
+
});
|
|
252
250
|
const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
|
|
253
251
|
const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
|
|
254
252
|
let proposedTop = y - offset.y;
|
|
@@ -300,7 +298,7 @@ export class Overlay extends CompositeDisposable {
|
|
|
300
298
|
hasMoved = true;
|
|
301
299
|
this._onDidStartMoving.fire();
|
|
302
300
|
}
|
|
303
|
-
}), addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
|
|
301
|
+
}), addDisposableListener(globalThis.window, 'pointerup', end), addDisposableListener(globalThis.window, 'pointercancel', end));
|
|
304
302
|
};
|
|
305
303
|
this.addDisposables(addDisposableListener(dragTarget, 'pointerdown', (event) => {
|
|
306
304
|
if (event.defaultPrevented) {
|
|
@@ -354,20 +352,18 @@ export class Overlay extends CompositeDisposable {
|
|
|
354
352
|
move.dispose();
|
|
355
353
|
this._onDidChangeEnd.fire();
|
|
356
354
|
};
|
|
357
|
-
move.value = new CompositeDisposable(addDisposableListener(window, 'pointermove', (e) => {
|
|
355
|
+
move.value = new CompositeDisposable(addDisposableListener(globalThis.window, 'pointermove', (e) => {
|
|
358
356
|
const containerRect = this.options.container.getBoundingClientRect();
|
|
359
357
|
const overlayRect = this._element.getBoundingClientRect();
|
|
360
358
|
const y = e.clientY - containerRect.top;
|
|
361
359
|
const x = e.clientX - containerRect.left;
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
};
|
|
370
|
-
}
|
|
360
|
+
// record the initial dimensions since as all subsequence moves are relative to this
|
|
361
|
+
startPosition !== null && startPosition !== void 0 ? startPosition : (startPosition = {
|
|
362
|
+
originalY: y,
|
|
363
|
+
originalHeight: overlayRect.height,
|
|
364
|
+
originalX: x,
|
|
365
|
+
originalWidth: overlayRect.width,
|
|
366
|
+
});
|
|
371
367
|
let top = undefined;
|
|
372
368
|
let bottom = undefined;
|
|
373
369
|
let height = undefined;
|
|
@@ -382,7 +378,8 @@ export class Overlay extends CompositeDisposable {
|
|
|
382
378
|
? Math.max(0, containerRect.height -
|
|
383
379
|
Overlay.MINIMUM_HEIGHT)
|
|
384
380
|
: Math.max(0, startPosition.originalY +
|
|
385
|
-
startPosition
|
|
381
|
+
startPosition
|
|
382
|
+
.originalHeight -
|
|
386
383
|
Overlay.MINIMUM_HEIGHT);
|
|
387
384
|
top = clamp(y, 0, maxTop);
|
|
388
385
|
height =
|
|
@@ -397,8 +394,8 @@ export class Overlay extends CompositeDisposable {
|
|
|
397
394
|
startPosition.originalHeight;
|
|
398
395
|
// When dragging bottom handle, constrain height to container height
|
|
399
396
|
const minHeight = top < 0 &&
|
|
400
|
-
typeof this.options
|
|
401
|
-
'number'
|
|
397
|
+
typeof this.options
|
|
398
|
+
.minimumInViewportHeight === 'number'
|
|
402
399
|
? -top +
|
|
403
400
|
this.options.minimumInViewportHeight
|
|
404
401
|
: Overlay.MINIMUM_HEIGHT;
|
|
@@ -428,8 +425,8 @@ export class Overlay extends CompositeDisposable {
|
|
|
428
425
|
startPosition.originalWidth;
|
|
429
426
|
// When dragging right handle, constrain width to container width
|
|
430
427
|
const minWidth = left < 0 &&
|
|
431
|
-
typeof this.options
|
|
432
|
-
'number'
|
|
428
|
+
typeof this.options
|
|
429
|
+
.minimumInViewportWidth === 'number'
|
|
433
430
|
? -left +
|
|
434
431
|
this.options.minimumInViewportWidth
|
|
435
432
|
: Overlay.MINIMUM_WIDTH;
|
|
@@ -498,7 +495,7 @@ export class Overlay extends CompositeDisposable {
|
|
|
498
495
|
}
|
|
499
496
|
}
|
|
500
497
|
},
|
|
501
|
-
}, addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
|
|
498
|
+
}, addDisposableListener(globalThis.window, 'pointerup', end), addDisposableListener(globalThis.window, 'pointercancel', end));
|
|
502
499
|
}));
|
|
503
500
|
}
|
|
504
501
|
getMinimumWidth(width) {
|
|
@@ -9,7 +9,7 @@ class PositionCache {
|
|
|
9
9
|
}
|
|
10
10
|
getPosition(element) {
|
|
11
11
|
const cached = this.cache.get(element);
|
|
12
|
-
if (cached
|
|
12
|
+
if ((cached === null || cached === void 0 ? void 0 : cached.frameId) === this.currentFrameId) {
|
|
13
13
|
return cached.rect;
|
|
14
14
|
}
|
|
15
15
|
this.scheduleFrameUpdate();
|
|
@@ -221,11 +221,10 @@ export class OverlayRenderContainer extends CompositeDisposable {
|
|
|
221
221
|
correctLayerPosition();
|
|
222
222
|
}));
|
|
223
223
|
this.map[panel.api.id].destroy = Disposable.from(() => {
|
|
224
|
-
var _a;
|
|
225
224
|
if (contentElement.parentElement === focusContainer) {
|
|
226
|
-
|
|
225
|
+
contentElement.remove();
|
|
227
226
|
}
|
|
228
|
-
|
|
227
|
+
focusContainer.remove();
|
|
229
228
|
});
|
|
230
229
|
correctLayerPosition();
|
|
231
230
|
queueMicrotask(() => {
|
|
@@ -75,7 +75,7 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
|
|
|
75
75
|
}
|
|
76
76
|
onDrop(event) {
|
|
77
77
|
const data = getPaneData();
|
|
78
|
-
if (
|
|
78
|
+
if ((data === null || data === void 0 ? void 0 : data.viewId) !== this.accessor.id) {
|
|
79
79
|
// if there is no local drag event for this panel
|
|
80
80
|
// or if the drag event was creating by another Paneview instance
|
|
81
81
|
this._onDidDrop.fire(Object.assign(Object.assign({}, event), { panel: this, api: new PaneviewApi(this.accessor), getData: getPaneData }));
|
|
@@ -132,9 +132,7 @@ export class PaneviewComponent extends Resizable {
|
|
|
132
132
|
name: options.headerComponent,
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
|
-
|
|
136
|
-
header = new DefaultHeader();
|
|
137
|
-
}
|
|
135
|
+
header !== null && header !== void 0 ? header : (header = new DefaultHeader());
|
|
138
136
|
const view = new PaneFramework({
|
|
139
137
|
id: options.id,
|
|
140
138
|
component: options.component,
|
|
@@ -233,9 +231,7 @@ export class PaneviewComponent extends Resizable {
|
|
|
233
231
|
name: data.headerComponent,
|
|
234
232
|
});
|
|
235
233
|
}
|
|
236
|
-
|
|
237
|
-
header = new DefaultHeader();
|
|
238
|
-
}
|
|
234
|
+
header !== null && header !== void 0 ? header : (header = new DefaultHeader());
|
|
239
235
|
const panel = new PaneFramework({
|
|
240
236
|
id: data.id,
|
|
241
237
|
component: data.component,
|