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.
Files changed (81) hide show
  1. package/README.md +56 -8
  2. package/dist/cjs/api/dockviewGroupPanelApi.d.ts +5 -0
  3. package/dist/cjs/api/dockviewGroupPanelApi.js +13 -1
  4. package/dist/cjs/api/dockviewPanelApi.js +1 -1
  5. package/dist/cjs/constants.js +6 -1
  6. package/dist/cjs/dnd/abstractDragHandler.js +3 -1
  7. package/dist/cjs/dnd/droptarget.js +2 -2
  8. package/dist/cjs/dockview/components/popupService.js +2 -0
  9. package/dist/cjs/dockview/components/titlebar/tabs.d.ts +5 -0
  10. package/dist/cjs/dockview/components/titlebar/tabs.js +31 -4
  11. package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts +5 -0
  12. package/dist/cjs/dockview/components/titlebar/tabsContainer.js +21 -0
  13. package/dist/cjs/dockview/deserializer.js +1 -1
  14. package/dist/cjs/dockview/dockviewComponent.d.ts +2 -1
  15. package/dist/cjs/dockview/dockviewComponent.js +73 -47
  16. package/dist/cjs/dockview/dockviewGroupPanel.js +16 -13
  17. package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts +11 -1
  18. package/dist/cjs/dockview/dockviewGroupPanelModel.js +62 -5
  19. package/dist/cjs/dockview/framework.d.ts +2 -0
  20. package/dist/cjs/dockview/options.d.ts +3 -0
  21. package/dist/cjs/dockview/options.js +1 -0
  22. package/dist/cjs/dom.js +9 -1
  23. package/dist/cjs/framwork.d.ts +1 -1
  24. package/dist/cjs/lifecycle.d.ts +2 -1
  25. package/dist/cjs/lifecycle.js +6 -3
  26. package/dist/cjs/overlay/overlay.js +2 -1
  27. package/dist/cjs/scrollbar.d.ts +5 -2
  28. package/dist/cjs/scrollbar.js +88 -26
  29. package/dist/dockview-core.js +265 -66
  30. package/dist/dockview-core.min.js +2 -2
  31. package/dist/dockview-core.min.js.map +1 -1
  32. package/dist/dockview-core.min.noStyle.js +2 -2
  33. package/dist/dockview-core.min.noStyle.js.map +1 -1
  34. package/dist/dockview-core.noStyle.js +264 -65
  35. package/dist/esm/api/dockviewGroupPanelApi.d.ts +5 -0
  36. package/dist/esm/api/dockviewGroupPanelApi.js +14 -2
  37. package/dist/esm/api/dockviewPanelApi.js +1 -1
  38. package/dist/esm/constants.js +6 -1
  39. package/dist/esm/dnd/abstractDragHandler.js +3 -1
  40. package/dist/esm/dnd/droptarget.js +2 -2
  41. package/dist/esm/dockview/components/popupService.js +2 -0
  42. package/dist/esm/dockview/components/titlebar/tabs.d.ts +5 -0
  43. package/dist/esm/dockview/components/titlebar/tabs.js +28 -5
  44. package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts +5 -0
  45. package/dist/esm/dockview/components/titlebar/tabsContainer.js +18 -1
  46. package/dist/esm/dockview/deserializer.js +1 -1
  47. package/dist/esm/dockview/dockviewComponent.d.ts +2 -1
  48. package/dist/esm/dockview/dockviewComponent.js +15 -3
  49. package/dist/esm/dockview/dockviewGroupPanel.js +17 -14
  50. package/dist/esm/dockview/dockviewGroupPanelModel.d.ts +11 -1
  51. package/dist/esm/dockview/dockviewGroupPanelModel.js +61 -8
  52. package/dist/esm/dockview/framework.d.ts +2 -0
  53. package/dist/esm/dockview/options.d.ts +3 -0
  54. package/dist/esm/dockview/options.js +1 -0
  55. package/dist/esm/dom.js +9 -1
  56. package/dist/esm/framwork.d.ts +1 -1
  57. package/dist/esm/lifecycle.d.ts +2 -1
  58. package/dist/esm/lifecycle.js +6 -3
  59. package/dist/esm/overlay/overlay.js +2 -1
  60. package/dist/esm/scrollbar.d.ts +5 -2
  61. package/dist/esm/scrollbar.js +85 -27
  62. package/dist/{dockview-core.cjs.js → package/main.cjs.js} +265 -66
  63. package/dist/package/main.cjs.min.js +7 -0
  64. package/dist/package/main.esm.min.mjs +7 -0
  65. package/dist/{dockview-core.esm.js → package/main.esm.mjs} +265 -66
  66. package/dist/styles/dockview.css +63 -7
  67. package/package.json +63 -53
  68. package/dist/dockview-core.amd.js +0 -11373
  69. package/dist/dockview-core.amd.js.map +0 -1
  70. package/dist/dockview-core.amd.min.js +0 -8
  71. package/dist/dockview-core.amd.min.js.map +0 -1
  72. package/dist/dockview-core.amd.min.noStyle.js +0 -8
  73. package/dist/dockview-core.amd.min.noStyle.js.map +0 -1
  74. package/dist/dockview-core.amd.noStyle.js +0 -11343
  75. package/dist/dockview-core.amd.noStyle.js.map +0 -1
  76. package/dist/dockview-core.cjs.js.map +0 -1
  77. package/dist/dockview-core.esm.js.map +0 -1
  78. package/dist/dockview-core.esm.min.js +0 -8
  79. package/dist/dockview-core.esm.min.js.map +0 -1
  80. package/dist/dockview-core.js.map +0 -1
  81. package/dist/dockview-core.noStyle.js.map +0 -1
@@ -44,6 +44,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
44
44
  floatingGroupBounds: undefined,
45
45
  popoutUrl: undefined,
46
46
  defaultRenderer: undefined,
47
+ defaultHeaderPosition: undefined,
47
48
  debug: undefined,
48
49
  rootOverlayModel: undefined,
49
50
  locked: undefined,
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;
@@ -1,4 +1,4 @@
1
- import { Parameters } from "./panel/types";
1
+ import { Parameters } from './panel/types';
2
2
  export interface PanelParameters<T extends {} = Parameters> {
3
3
  params: T;
4
4
  }
@@ -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 {
@@ -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.push(arg); });
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 = "calc(var(--dv-overlay-z-index, 999) + ".concat(i * 2, ")");
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;
@@ -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 _horizontalScrollbar;
6
- private _scrollLeft;
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
  }
@@ -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._scrollLeft = 0;
28
+ _this._scrollOffset = 0;
29
+ _this._orientation = 'horizontal';
29
30
  _this._element = document.createElement('div');
30
31
  _this._element.className = 'dv-scrollable';
31
- _this._horizontalScrollbar = document.createElement('div');
32
- _this._horizontalScrollbar.className = 'dv-scrollbar-horizontal';
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._horizontalScrollbar);
35
+ _this.element.appendChild(_this._scrollbar);
35
36
  _this.addDisposables((0, events_1.addDisposableListener)(_this.element, 'wheel', function (event) {
36
- _this._scrollLeft += event.deltaY * Scrollbar.MouseWheelSpeed;
37
+ _this._scrollOffset += event.deltaY * Scrollbar.MouseWheelSpeed;
37
38
  _this.calculateScrollbarStyles();
38
- }), (0, events_1.addDisposableListener)(_this._horizontalScrollbar, 'pointerdown', function (event) {
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 originalClientX = event.clientX;
42
- var originalScrollLeft = _this._scrollLeft;
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 deltaX = event.clientX - originalClientX;
45
- var clientWidth = _this.element.clientWidth;
46
- var scrollWidth = _this.scrollableElement.scrollWidth;
47
- var p = clientWidth / scrollWidth;
48
- _this._scrollLeft = originalScrollLeft + deltaX / p;
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._scrollLeft = _this.scrollableElement.scrollLeft;
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 clientWidth = this.element.clientWidth;
87
- var scrollWidth = this.scrollableElement.scrollWidth;
88
- var hasScrollbar = scrollWidth > clientWidth;
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 = clientWidth * (clientWidth / scrollWidth);
91
- this._horizontalScrollbar.style.width = "".concat(px, "px");
92
- this._scrollLeft = (0, math_1.clamp)(this._scrollLeft, 0, this.scrollableElement.scrollWidth - clientWidth);
93
- this.scrollableElement.scrollLeft = this._scrollLeft;
94
- var percentageComplete = this._scrollLeft / (scrollWidth - clientWidth);
95
- this._horizontalScrollbar.style.left = "".concat((clientWidth - px) * percentageComplete, "px");
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._horizontalScrollbar.style.width = "0px";
99
- this._horizontalScrollbar.style.left = "0px";
100
- this._scrollLeft = 0;
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;