dockview-core 4.13.1 → 5.0.0
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/README.md +56 -8
- package/dist/cjs/api/dockviewGroupPanelApi.d.ts +5 -0
- package/dist/cjs/api/dockviewGroupPanelApi.js +13 -1
- package/dist/cjs/api/dockviewPanelApi.js +1 -1
- package/dist/cjs/constants.js +6 -1
- package/dist/cjs/dnd/abstractDragHandler.js +3 -1
- package/dist/cjs/dnd/droptarget.js +2 -2
- package/dist/cjs/dockview/components/popupService.js +2 -0
- package/dist/cjs/dockview/components/titlebar/tabs.d.ts +5 -0
- package/dist/cjs/dockview/components/titlebar/tabs.js +31 -4
- package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts +5 -0
- package/dist/cjs/dockview/components/titlebar/tabsContainer.js +21 -0
- package/dist/cjs/dockview/deserializer.js +1 -1
- package/dist/cjs/dockview/dockviewComponent.d.ts +2 -1
- package/dist/cjs/dockview/dockviewComponent.js +73 -47
- package/dist/cjs/dockview/dockviewGroupPanel.js +16 -13
- package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts +11 -1
- package/dist/cjs/dockview/dockviewGroupPanelModel.js +62 -5
- package/dist/cjs/dockview/framework.d.ts +2 -0
- package/dist/cjs/dockview/options.d.ts +3 -0
- package/dist/cjs/dockview/options.js +1 -0
- package/dist/cjs/dom.js +9 -1
- package/dist/cjs/framwork.d.ts +1 -1
- package/dist/cjs/lifecycle.d.ts +2 -1
- package/dist/cjs/lifecycle.js +6 -3
- package/dist/cjs/overlay/overlay.js +2 -1
- package/dist/cjs/scrollbar.d.ts +5 -2
- package/dist/cjs/scrollbar.js +88 -26
- package/dist/dockview-core.js +265 -66
- 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 +264 -65
- package/dist/esm/api/dockviewGroupPanelApi.d.ts +5 -0
- package/dist/esm/api/dockviewGroupPanelApi.js +14 -2
- package/dist/esm/api/dockviewPanelApi.js +1 -1
- package/dist/esm/constants.js +6 -1
- package/dist/esm/dnd/abstractDragHandler.js +3 -1
- package/dist/esm/dnd/droptarget.js +2 -2
- package/dist/esm/dockview/components/popupService.js +2 -0
- package/dist/esm/dockview/components/titlebar/tabs.d.ts +5 -0
- package/dist/esm/dockview/components/titlebar/tabs.js +28 -5
- package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts +5 -0
- package/dist/esm/dockview/components/titlebar/tabsContainer.js +18 -1
- package/dist/esm/dockview/deserializer.js +1 -1
- package/dist/esm/dockview/dockviewComponent.d.ts +2 -1
- package/dist/esm/dockview/dockviewComponent.js +15 -3
- package/dist/esm/dockview/dockviewGroupPanel.js +17 -14
- package/dist/esm/dockview/dockviewGroupPanelModel.d.ts +11 -1
- package/dist/esm/dockview/dockviewGroupPanelModel.js +61 -8
- package/dist/esm/dockview/framework.d.ts +2 -0
- package/dist/esm/dockview/options.d.ts +3 -0
- package/dist/esm/dockview/options.js +1 -0
- package/dist/esm/dom.js +9 -1
- package/dist/esm/framwork.d.ts +1 -1
- package/dist/esm/lifecycle.d.ts +2 -1
- package/dist/esm/lifecycle.js +6 -3
- package/dist/esm/overlay/overlay.js +2 -1
- package/dist/esm/scrollbar.d.ts +5 -2
- package/dist/esm/scrollbar.js +85 -27
- package/dist/{dockview-core.cjs.js → package/main.cjs.js} +265 -66
- package/dist/package/main.cjs.min.js +7 -0
- package/dist/package/main.esm.min.mjs +7 -0
- package/dist/{dockview-core.esm.js → package/main.esm.mjs} +265 -66
- package/dist/styles/dockview.css +63 -7
- package/package.json +63 -53
- package/dist/dockview-core.amd.js +0 -11373
- package/dist/dockview-core.amd.js.map +0 -1
- package/dist/dockview-core.amd.min.js +0 -8
- package/dist/dockview-core.amd.min.js.map +0 -1
- package/dist/dockview-core.amd.min.noStyle.js +0 -8
- package/dist/dockview-core.amd.min.noStyle.js.map +0 -1
- package/dist/dockview-core.amd.noStyle.js +0 -11343
- package/dist/dockview-core.amd.noStyle.js.map +0 -1
- package/dist/dockview-core.cjs.js.map +0 -1
- package/dist/dockview-core.esm.js.map +0 -1
- package/dist/dockview-core.esm.min.js +0 -8
- package/dist/dockview-core.esm.min.js.map +0 -1
- package/dist/dockview-core.js.map +0 -1
- package/dist/dockview-core.noStyle.js.map +0 -1
package/dist/cjs/dom.js
CHANGED
|
@@ -428,9 +428,9 @@ var Classnames = /** @class */ (function () {
|
|
|
428
428
|
exports.Classnames = Classnames;
|
|
429
429
|
var DEBOUCE_DELAY = 100;
|
|
430
430
|
function isChildEntirelyVisibleWithinParent(child, parent) {
|
|
431
|
-
//
|
|
432
431
|
var childPosition = getDomNodePagePosition(child);
|
|
433
432
|
var parentPosition = getDomNodePagePosition(parent);
|
|
433
|
+
// Check horizontal visibility
|
|
434
434
|
if (childPosition.left < parentPosition.left) {
|
|
435
435
|
return false;
|
|
436
436
|
}
|
|
@@ -438,6 +438,14 @@ function isChildEntirelyVisibleWithinParent(child, parent) {
|
|
|
438
438
|
parentPosition.left + parentPosition.width) {
|
|
439
439
|
return false;
|
|
440
440
|
}
|
|
441
|
+
// Check vertical visibility
|
|
442
|
+
if (childPosition.top < parentPosition.top) {
|
|
443
|
+
return false;
|
|
444
|
+
}
|
|
445
|
+
if (childPosition.top + childPosition.height >
|
|
446
|
+
parentPosition.top + parentPosition.height) {
|
|
447
|
+
return false;
|
|
448
|
+
}
|
|
441
449
|
return true;
|
|
442
450
|
}
|
|
443
451
|
exports.isChildEntirelyVisibleWithinParent = isChildEntirelyVisibleWithinParent;
|
package/dist/cjs/framwork.d.ts
CHANGED
package/dist/cjs/lifecycle.d.ts
CHANGED
|
@@ -10,11 +10,12 @@ export declare namespace Disposable {
|
|
|
10
10
|
function from(func: () => void): IDisposable;
|
|
11
11
|
}
|
|
12
12
|
export declare class CompositeDisposable {
|
|
13
|
-
private _disposables;
|
|
13
|
+
private readonly _disposables;
|
|
14
14
|
private _isDisposed;
|
|
15
15
|
get isDisposed(): boolean;
|
|
16
16
|
constructor(...args: IDisposable[]);
|
|
17
17
|
addDisposables(...args: IDisposable[]): void;
|
|
18
|
+
removeDisposable(disposable: IDisposable): void;
|
|
18
19
|
dispose(): void;
|
|
19
20
|
}
|
|
20
21
|
export declare class MutableDisposable implements IDisposable {
|
package/dist/cjs/lifecycle.js
CHANGED
|
@@ -24,7 +24,7 @@ var CompositeDisposable = /** @class */ (function () {
|
|
|
24
24
|
args[_i] = arguments[_i];
|
|
25
25
|
}
|
|
26
26
|
this._isDisposed = false;
|
|
27
|
-
this._disposables = args;
|
|
27
|
+
this._disposables = new Set(args);
|
|
28
28
|
}
|
|
29
29
|
Object.defineProperty(CompositeDisposable.prototype, "isDisposed", {
|
|
30
30
|
get: function () {
|
|
@@ -39,7 +39,10 @@ var CompositeDisposable = /** @class */ (function () {
|
|
|
39
39
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
40
40
|
args[_i] = arguments[_i];
|
|
41
41
|
}
|
|
42
|
-
args.forEach(function (arg) { return _this._disposables.
|
|
42
|
+
args.forEach(function (arg) { return _this._disposables.add(arg); });
|
|
43
|
+
};
|
|
44
|
+
CompositeDisposable.prototype.removeDisposable = function (disposable) {
|
|
45
|
+
this._disposables.delete(disposable);
|
|
43
46
|
};
|
|
44
47
|
CompositeDisposable.prototype.dispose = function () {
|
|
45
48
|
if (this._isDisposed) {
|
|
@@ -47,7 +50,7 @@ var CompositeDisposable = /** @class */ (function () {
|
|
|
47
50
|
}
|
|
48
51
|
this._isDisposed = true;
|
|
49
52
|
this._disposables.forEach(function (arg) { return arg.dispose(); });
|
|
50
|
-
this._disposables
|
|
53
|
+
this._disposables.clear();
|
|
51
54
|
};
|
|
52
55
|
return CompositeDisposable;
|
|
53
56
|
}());
|
|
@@ -73,7 +73,8 @@ var AriaLevelTracker = /** @class */ (function () {
|
|
|
73
73
|
AriaLevelTracker.prototype.update = function () {
|
|
74
74
|
for (var i = 0; i < this._orderedList.length; i++) {
|
|
75
75
|
this._orderedList[i].setAttribute('aria-level', "".concat(i));
|
|
76
|
-
this._orderedList[i].style.zIndex =
|
|
76
|
+
this._orderedList[i].style.zIndex =
|
|
77
|
+
"calc(var(--dv-overlay-z-index, 999) + ".concat(i * 2, ")");
|
|
77
78
|
}
|
|
78
79
|
};
|
|
79
80
|
return AriaLevelTracker;
|
package/dist/cjs/scrollbar.d.ts
CHANGED
|
@@ -2,11 +2,14 @@ import { CompositeDisposable } from './lifecycle';
|
|
|
2
2
|
export declare class Scrollbar extends CompositeDisposable {
|
|
3
3
|
private readonly scrollableElement;
|
|
4
4
|
private readonly _element;
|
|
5
|
-
private readonly
|
|
6
|
-
private
|
|
5
|
+
private readonly _scrollbar;
|
|
6
|
+
private _scrollOffset;
|
|
7
7
|
private _animationTimer;
|
|
8
|
+
private _orientation;
|
|
8
9
|
static MouseWheelSpeed: number;
|
|
9
10
|
get element(): HTMLElement;
|
|
11
|
+
get orientation(): 'horizontal' | 'vertical';
|
|
12
|
+
set orientation(value: 'horizontal' | 'vertical');
|
|
10
13
|
constructor(scrollableElement: HTMLElement);
|
|
11
14
|
private calculateScrollbarStyles;
|
|
12
15
|
}
|
package/dist/cjs/scrollbar.js
CHANGED
|
@@ -25,27 +25,36 @@ var Scrollbar = /** @class */ (function (_super) {
|
|
|
25
25
|
function Scrollbar(scrollableElement) {
|
|
26
26
|
var _this = _super.call(this) || this;
|
|
27
27
|
_this.scrollableElement = scrollableElement;
|
|
28
|
-
_this.
|
|
28
|
+
_this._scrollOffset = 0;
|
|
29
|
+
_this._orientation = 'horizontal';
|
|
29
30
|
_this._element = document.createElement('div');
|
|
30
31
|
_this._element.className = 'dv-scrollable';
|
|
31
|
-
_this.
|
|
32
|
-
_this.
|
|
32
|
+
_this._scrollbar = document.createElement('div');
|
|
33
|
+
_this._scrollbar.className = 'dv-scrollbar dv-scrollbar-horizontal';
|
|
33
34
|
_this.element.appendChild(scrollableElement);
|
|
34
|
-
_this.element.appendChild(_this.
|
|
35
|
+
_this.element.appendChild(_this._scrollbar);
|
|
35
36
|
_this.addDisposables((0, events_1.addDisposableListener)(_this.element, 'wheel', function (event) {
|
|
36
|
-
_this.
|
|
37
|
+
_this._scrollOffset += event.deltaY * Scrollbar.MouseWheelSpeed;
|
|
37
38
|
_this.calculateScrollbarStyles();
|
|
38
|
-
}), (0, events_1.addDisposableListener)(_this.
|
|
39
|
+
}), (0, events_1.addDisposableListener)(_this._scrollbar, 'pointerdown', function (event) {
|
|
39
40
|
event.preventDefault();
|
|
40
41
|
(0, dom_1.toggleClass)(_this.element, 'dv-scrollable-scrolling', true);
|
|
41
|
-
var
|
|
42
|
-
|
|
42
|
+
var originalClient = _this._orientation === 'horizontal'
|
|
43
|
+
? event.clientX
|
|
44
|
+
: event.clientY;
|
|
45
|
+
var originalScrollOffset = _this._scrollOffset;
|
|
43
46
|
var onPointerMove = function (event) {
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var
|
|
48
|
-
|
|
47
|
+
var delta = _this._orientation === 'horizontal'
|
|
48
|
+
? event.clientX - originalClient
|
|
49
|
+
: event.clientY - originalClient;
|
|
50
|
+
var clientSize = _this._orientation === 'horizontal'
|
|
51
|
+
? _this.element.clientWidth
|
|
52
|
+
: _this.element.clientHeight;
|
|
53
|
+
var scrollSize = _this._orientation === 'horizontal'
|
|
54
|
+
? _this.scrollableElement.scrollWidth
|
|
55
|
+
: _this.scrollableElement.scrollHeight;
|
|
56
|
+
var p = clientSize / scrollSize;
|
|
57
|
+
_this._scrollOffset = originalScrollOffset + delta / p;
|
|
49
58
|
_this.calculateScrollbarStyles();
|
|
50
59
|
};
|
|
51
60
|
var onEnd = function () {
|
|
@@ -60,7 +69,10 @@ var Scrollbar = /** @class */ (function (_super) {
|
|
|
60
69
|
}), (0, events_1.addDisposableListener)(_this.element, 'scroll', function () {
|
|
61
70
|
_this.calculateScrollbarStyles();
|
|
62
71
|
}), (0, events_1.addDisposableListener)(_this.scrollableElement, 'scroll', function () {
|
|
63
|
-
_this.
|
|
72
|
+
_this._scrollOffset =
|
|
73
|
+
_this._orientation === 'horizontal'
|
|
74
|
+
? _this.scrollableElement.scrollLeft
|
|
75
|
+
: _this.scrollableElement.scrollTop;
|
|
64
76
|
_this.calculateScrollbarStyles();
|
|
65
77
|
}), (0, dom_1.watchElementResize)(_this.element, function () {
|
|
66
78
|
(0, dom_1.toggleClass)(_this.element, 'dv-scrollable-resizing', true);
|
|
@@ -82,22 +94,72 @@ var Scrollbar = /** @class */ (function (_super) {
|
|
|
82
94
|
enumerable: false,
|
|
83
95
|
configurable: true
|
|
84
96
|
});
|
|
97
|
+
Object.defineProperty(Scrollbar.prototype, "orientation", {
|
|
98
|
+
get: function () {
|
|
99
|
+
return this._orientation;
|
|
100
|
+
},
|
|
101
|
+
set: function (value) {
|
|
102
|
+
if (this._orientation === value) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
this._scrollOffset = 0;
|
|
106
|
+
this._orientation = value;
|
|
107
|
+
(0, dom_1.removeClasses)(this._scrollbar, 'dv-scrollbar-vertical', 'dv-scrollbar-horizontal');
|
|
108
|
+
if (value === 'vertical') {
|
|
109
|
+
(0, dom_1.addClasses)(this._scrollbar, 'dv-scrollbar-vertical');
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
(0, dom_1.addClasses)(this._scrollbar, 'dv-scrollbar-horizontal');
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
enumerable: false,
|
|
116
|
+
configurable: true
|
|
117
|
+
});
|
|
85
118
|
Scrollbar.prototype.calculateScrollbarStyles = function () {
|
|
86
|
-
var
|
|
87
|
-
|
|
88
|
-
|
|
119
|
+
var clientSize = this._orientation === 'horizontal'
|
|
120
|
+
? this.element.clientWidth
|
|
121
|
+
: this.element.clientHeight;
|
|
122
|
+
var scrollSize = this._orientation === 'horizontal'
|
|
123
|
+
? this.scrollableElement.scrollWidth
|
|
124
|
+
: this.scrollableElement.scrollHeight;
|
|
125
|
+
var hasScrollbar = scrollSize > clientSize;
|
|
89
126
|
if (hasScrollbar) {
|
|
90
|
-
var px =
|
|
91
|
-
this.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
127
|
+
var px = clientSize * (clientSize / scrollSize);
|
|
128
|
+
if (this._orientation === 'horizontal') {
|
|
129
|
+
this._scrollbar.style.width = "".concat(px, "px");
|
|
130
|
+
this._scrollbar.style.height = '';
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
this._scrollbar.style.height = "".concat(px, "px");
|
|
134
|
+
this._scrollbar.style.width = '';
|
|
135
|
+
}
|
|
136
|
+
this._scrollOffset = (0, math_1.clamp)(this._scrollOffset, 0, scrollSize - clientSize);
|
|
137
|
+
if (this._orientation === 'horizontal') {
|
|
138
|
+
this.scrollableElement.scrollLeft = this._scrollOffset;
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
this.scrollableElement.scrollTop = this._scrollOffset;
|
|
142
|
+
}
|
|
143
|
+
var percentageComplete = this._scrollOffset / (scrollSize - clientSize);
|
|
144
|
+
if (this._orientation === 'horizontal') {
|
|
145
|
+
this._scrollbar.style.left = "".concat((clientSize - px) * percentageComplete, "px");
|
|
146
|
+
this._scrollbar.style.top = '';
|
|
147
|
+
}
|
|
148
|
+
else {
|
|
149
|
+
this._scrollbar.style.top = "".concat((clientSize - px) * percentageComplete, "px");
|
|
150
|
+
this._scrollbar.style.left = '';
|
|
151
|
+
}
|
|
96
152
|
}
|
|
97
153
|
else {
|
|
98
|
-
this.
|
|
99
|
-
|
|
100
|
-
|
|
154
|
+
if (this._orientation === 'horizontal') {
|
|
155
|
+
this._scrollbar.style.width = '0px';
|
|
156
|
+
this._scrollbar.style.left = '0px';
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
this._scrollbar.style.height = '0px';
|
|
160
|
+
this._scrollbar.style.top = '0px';
|
|
161
|
+
}
|
|
162
|
+
this._scrollOffset = 0;
|
|
101
163
|
}
|
|
102
164
|
};
|
|
103
165
|
Scrollbar.MouseWheelSpeed = 1;
|