dockview-core 4.4.0 → 4.5.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 (53) hide show
  1. package/dist/cjs/api/dockviewGroupPanelApi.d.ts +4 -0
  2. package/dist/cjs/api/dockviewGroupPanelApi.js +4 -3
  3. package/dist/cjs/api/dockviewPanelApi.js +1 -0
  4. package/dist/cjs/dockview/components/tab/tab.d.ts +1 -0
  5. package/dist/cjs/dockview/components/tab/tab.js +4 -1
  6. package/dist/cjs/dockview/components/titlebar/tabs.d.ts +1 -0
  7. package/dist/cjs/dockview/components/titlebar/tabs.js +16 -0
  8. package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts +2 -0
  9. package/dist/cjs/dockview/components/titlebar/tabsContainer.js +4 -0
  10. package/dist/cjs/dockview/components/titlebar/voidContainer.d.ts +1 -0
  11. package/dist/cjs/dockview/components/titlebar/voidContainer.js +4 -1
  12. package/dist/cjs/dockview/dockviewComponent.d.ts +3 -0
  13. package/dist/cjs/dockview/dockviewComponent.js +142 -37
  14. package/dist/cjs/dockview/dockviewGroupPanelModel.d.ts +10 -8
  15. package/dist/cjs/dockview/dockviewGroupPanelModel.js +3 -0
  16. package/dist/dockview-core.amd.js +131 -15
  17. package/dist/dockview-core.amd.js.map +1 -1
  18. package/dist/dockview-core.amd.min.js +2 -2
  19. package/dist/dockview-core.amd.min.js.map +1 -1
  20. package/dist/dockview-core.amd.min.noStyle.js +2 -2
  21. package/dist/dockview-core.amd.min.noStyle.js.map +1 -1
  22. package/dist/dockview-core.amd.noStyle.js +131 -15
  23. package/dist/dockview-core.amd.noStyle.js.map +1 -1
  24. package/dist/dockview-core.cjs.js +131 -15
  25. package/dist/dockview-core.cjs.js.map +1 -1
  26. package/dist/dockview-core.esm.js +131 -15
  27. package/dist/dockview-core.esm.js.map +1 -1
  28. package/dist/dockview-core.esm.min.js +2 -2
  29. package/dist/dockview-core.esm.min.js.map +1 -1
  30. package/dist/dockview-core.js +131 -15
  31. package/dist/dockview-core.js.map +1 -1
  32. package/dist/dockview-core.min.js +2 -2
  33. package/dist/dockview-core.min.js.map +1 -1
  34. package/dist/dockview-core.min.noStyle.js +2 -2
  35. package/dist/dockview-core.min.noStyle.js.map +1 -1
  36. package/dist/dockview-core.noStyle.js +131 -15
  37. package/dist/dockview-core.noStyle.js.map +1 -1
  38. package/dist/esm/api/dockviewGroupPanelApi.d.ts +4 -0
  39. package/dist/esm/api/dockviewGroupPanelApi.js +4 -3
  40. package/dist/esm/api/dockviewPanelApi.js +1 -0
  41. package/dist/esm/dockview/components/tab/tab.d.ts +1 -0
  42. package/dist/esm/dockview/components/tab/tab.js +4 -1
  43. package/dist/esm/dockview/components/titlebar/tabs.d.ts +1 -0
  44. package/dist/esm/dockview/components/titlebar/tabs.js +5 -0
  45. package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts +2 -0
  46. package/dist/esm/dockview/components/titlebar/tabsContainer.js +4 -0
  47. package/dist/esm/dockview/components/titlebar/voidContainer.d.ts +1 -0
  48. package/dist/esm/dockview/components/titlebar/voidContainer.js +4 -1
  49. package/dist/esm/dockview/dockviewComponent.d.ts +3 -0
  50. package/dist/esm/dockview/dockviewComponent.js +105 -9
  51. package/dist/esm/dockview/dockviewGroupPanelModel.d.ts +10 -8
  52. package/dist/esm/dockview/dockviewGroupPanelModel.js +3 -0
  53. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * dockview-core
3
- * @version 4.4.0
3
+ * @version 4.5.0
4
4
  * @link https://github.com/mathuo/dockview
5
5
  * @license MIT
6
6
  */
@@ -5021,7 +5021,7 @@ class Tab extends CompositeDisposable {
5021
5021
  this._element = document.createElement('div');
5022
5022
  this._element.className = 'dv-tab';
5023
5023
  this._element.tabIndex = 0;
5024
- this._element.draggable = true;
5024
+ this._element.draggable = !this.accessor.options.disableDnd;
5025
5025
  toggleClass(this.element, 'dv-inactive-tab', true);
5026
5026
  const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
5027
5027
  this.dropTarget = new Droptarget(this._element, {
@@ -5069,6 +5069,9 @@ class Tab extends CompositeDisposable {
5069
5069
  this.content = part;
5070
5070
  this._element.appendChild(this.content.element);
5071
5071
  }
5072
+ updateDragAndDropState() {
5073
+ this._element.draggable = !this.accessor.options.disableDnd;
5074
+ }
5072
5075
  dispose() {
5073
5076
  super.dispose();
5074
5077
  }
@@ -5140,7 +5143,7 @@ class VoidContainer extends CompositeDisposable {
5140
5143
  this.onDragStart = this._onDragStart.event;
5141
5144
  this._element = document.createElement('div');
5142
5145
  this._element.className = 'dv-void-container';
5143
- this._element.draggable = true;
5146
+ this._element.draggable = !this.accessor.options.disableDnd;
5144
5147
  this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'pointerdown', () => {
5145
5148
  this.accessor.doSetGroupActive(this.group);
5146
5149
  }));
@@ -5163,6 +5166,9 @@ class VoidContainer extends CompositeDisposable {
5163
5166
  this._onDrop.fire(event);
5164
5167
  }), this.dropTarget);
5165
5168
  }
5169
+ updateDragAndDropState() {
5170
+ this._element.draggable = !this.accessor.options.disableDnd;
5171
+ }
5166
5172
  }
5167
5173
 
5168
5174
  class Scrollbar extends CompositeDisposable {
@@ -5423,6 +5429,11 @@ class Tabs extends CompositeDisposable {
5423
5429
  .map((x) => x.value.panel.id);
5424
5430
  this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
5425
5431
  }
5432
+ updateDragAndDropState() {
5433
+ for (const tab of this._tabs) {
5434
+ tab.value.updateDragAndDropState();
5435
+ }
5436
+ }
5426
5437
  }
5427
5438
 
5428
5439
  const createSvgElementFromPath = (params) => {
@@ -5695,6 +5706,10 @@ class TabsContainer extends CompositeDisposable {
5695
5706
  });
5696
5707
  }));
5697
5708
  }
5709
+ updateDragAndDropState() {
5710
+ this.tabs.updateDragAndDropState();
5711
+ this.voidContainer.updateDragAndDropState();
5712
+ }
5698
5713
  }
5699
5714
 
5700
5715
  class DockviewUnhandledDragOverEvent extends AcceptableEvent {
@@ -6400,6 +6415,9 @@ class DockviewGroupPanelModel extends CompositeDisposable {
6400
6415
  }));
6401
6416
  }
6402
6417
  }
6418
+ updateDragAndDropState() {
6419
+ this.tabsContainer.updateDragAndDropState();
6420
+ }
6403
6421
  dispose() {
6404
6422
  var _a, _b, _c;
6405
6423
  super.dispose();
@@ -6645,23 +6663,24 @@ class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
6645
6663
  : window;
6646
6664
  }
6647
6665
  moveTo(options) {
6648
- var _a, _b, _c;
6666
+ var _a, _b, _c, _d;
6649
6667
  if (!this._group) {
6650
6668
  throw new Error(NOT_INITIALIZED_MESSAGE);
6651
6669
  }
6652
6670
  const group = (_a = options.group) !== null && _a !== void 0 ? _a : this.accessor.addGroup({
6653
6671
  direction: positionToDirection((_b = options.position) !== null && _b !== void 0 ? _b : 'right'),
6654
- skipSetActive: true,
6672
+ skipSetActive: (_c = options.skipSetActive) !== null && _c !== void 0 ? _c : false,
6655
6673
  });
6656
6674
  this.accessor.moveGroupOrPanel({
6657
6675
  from: { groupId: this._group.id },
6658
6676
  to: {
6659
6677
  group,
6660
6678
  position: options.group
6661
- ? (_c = options.position) !== null && _c !== void 0 ? _c : 'center'
6679
+ ? (_d = options.position) !== null && _d !== void 0 ? _d : 'center'
6662
6680
  : 'center',
6663
6681
  index: options.index,
6664
6682
  },
6683
+ skipSetActive: options.skipSetActive,
6665
6684
  });
6666
6685
  }
6667
6686
  maximize() {
@@ -6893,6 +6912,7 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
6893
6912
  : 'center',
6894
6913
  index: options.index,
6895
6914
  },
6915
+ skipSetActive: options.skipSetActive,
6896
6916
  });
6897
6917
  }
6898
6918
  setTitle(title) {
@@ -8872,7 +8892,12 @@ class DockviewComponent extends BaseGrid {
8872
8892
  }
8873
8893
  }
8874
8894
  this.updateDropTargetModel(options);
8895
+ const oldDisableDnd = this.options.disableDnd;
8875
8896
  this._options = Object.assign(Object.assign({}, this.options), options);
8897
+ const newDisableDnd = this.options.disableDnd;
8898
+ if (oldDisableDnd !== newDisableDnd) {
8899
+ this.updateDragAndDropState();
8900
+ }
8876
8901
  if ('theme' in options) {
8877
8902
  this.updateTheme();
8878
8903
  }
@@ -8887,6 +8912,12 @@ class DockviewComponent extends BaseGrid {
8887
8912
  }
8888
8913
  }
8889
8914
  }
8915
+ updateDragAndDropState() {
8916
+ // Update draggable state for all tabs and void containers
8917
+ for (const group of this.groups) {
8918
+ group.model.updateDragAndDropState();
8919
+ }
8920
+ }
8890
8921
  focus() {
8891
8922
  var _a;
8892
8923
  (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -9474,6 +9505,7 @@ class DockviewComponent extends BaseGrid {
9474
9505
  group: destinationGroup,
9475
9506
  position: destinationTarget,
9476
9507
  },
9508
+ skipSetActive: options.skipSetActive,
9477
9509
  });
9478
9510
  return;
9479
9511
  }
@@ -9492,11 +9524,17 @@ class DockviewComponent extends BaseGrid {
9492
9524
  // remove the group and do not set a new group as active
9493
9525
  this.doRemoveGroup(sourceGroup, { skipActive: true });
9494
9526
  }
9495
- this.movingLock(() => destinationGroup.model.openPanel(removedPanel, {
9496
- index: destinationIndex,
9497
- skipSetGroupActive: true,
9498
- }));
9499
- this.doSetGroupAndPanelActive(destinationGroup);
9527
+ this.movingLock(() => {
9528
+ var _a;
9529
+ return destinationGroup.model.openPanel(removedPanel, {
9530
+ index: destinationIndex,
9531
+ skipSetActive: (_a = options.skipSetActive) !== null && _a !== void 0 ? _a : false,
9532
+ skipSetGroupActive: true,
9533
+ });
9534
+ });
9535
+ if (!options.skipSetActive) {
9536
+ this.doSetGroupAndPanelActive(destinationGroup);
9537
+ }
9500
9538
  this._onDidMovePanel.fire({
9501
9539
  panel: removedPanel,
9502
9540
  from: sourceGroup,
@@ -9599,6 +9637,7 @@ class DockviewComponent extends BaseGrid {
9599
9637
  const target = options.to.position;
9600
9638
  if (target === 'center') {
9601
9639
  const activePanel = from.activePanel;
9640
+ const targetActivePanel = to.activePanel;
9602
9641
  const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, {
9603
9642
  skipSetActive: true,
9604
9643
  })));
@@ -9608,12 +9647,23 @@ class DockviewComponent extends BaseGrid {
9608
9647
  this.movingLock(() => {
9609
9648
  for (const panel of panels) {
9610
9649
  to.model.openPanel(panel, {
9611
- skipSetActive: panel !== activePanel,
9650
+ skipSetActive: true, // Always skip setting panels active during move
9612
9651
  skipSetGroupActive: true,
9613
9652
  });
9614
9653
  }
9615
9654
  });
9616
- this.doSetGroupAndPanelActive(to);
9655
+ if (!options.skipSetActive) {
9656
+ // Make the moved panel (from the source group) active
9657
+ if (activePanel) {
9658
+ this.doSetGroupAndPanelActive(to);
9659
+ }
9660
+ }
9661
+ else if (targetActivePanel) {
9662
+ // Ensure the target group's original active panel remains active
9663
+ to.model.openPanel(targetActivePanel, {
9664
+ skipSetGroupActive: true
9665
+ });
9666
+ }
9617
9667
  }
9618
9668
  else {
9619
9669
  switch (from.api.location.type) {
@@ -9633,12 +9683,39 @@ class DockviewComponent extends BaseGrid {
9633
9683
  if (!selectedPopoutGroup) {
9634
9684
  throw new Error('failed to find popout group');
9635
9685
  }
9636
- selectedPopoutGroup.disposable.dispose();
9686
+ // Remove from popout groups list to prevent automatic restoration
9687
+ const index = this._popoutGroups.indexOf(selectedPopoutGroup);
9688
+ if (index >= 0) {
9689
+ this._popoutGroups.splice(index, 1);
9690
+ }
9691
+ // Clean up the reference group (ghost) if it exists and is hidden
9692
+ if (selectedPopoutGroup.referenceGroup) {
9693
+ const referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
9694
+ if (referenceGroup && !referenceGroup.api.isVisible) {
9695
+ this.doRemoveGroup(referenceGroup, { skipActive: true });
9696
+ }
9697
+ }
9698
+ // Manually dispose the window without triggering restoration
9699
+ selectedPopoutGroup.window.dispose();
9700
+ // Update group's location and containers for target
9701
+ if (to.api.location.type === 'grid') {
9702
+ from.model.renderContainer = this.overlayRenderContainer;
9703
+ from.model.dropTargetContainer = this.rootDropTargetContainer;
9704
+ from.model.location = { type: 'grid' };
9705
+ }
9706
+ else if (to.api.location.type === 'floating') {
9707
+ from.model.renderContainer = this.overlayRenderContainer;
9708
+ from.model.dropTargetContainer = this.rootDropTargetContainer;
9709
+ from.model.location = { type: 'floating' };
9710
+ }
9711
+ break;
9637
9712
  }
9638
9713
  }
9639
- if (from.api.location.type !== 'popout') {
9714
+ // For moves to grid locations
9715
+ if (to.api.location.type === 'grid') {
9640
9716
  const referenceLocation = getGridLocation(to.element);
9641
9717
  const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
9718
+ // Add to grid for all moves targeting grid location
9642
9719
  let size;
9643
9720
  switch (this.gridview.orientation) {
9644
9721
  case Orientation.VERTICAL:
@@ -9656,10 +9733,49 @@ class DockviewComponent extends BaseGrid {
9656
9733
  }
9657
9734
  this.gridview.addView(from, size, dropLocation);
9658
9735
  }
9736
+ else if (to.api.location.type === 'floating') {
9737
+ // For moves to floating locations, add as floating group
9738
+ // Get the position/size from the target floating group
9739
+ const targetFloatingGroup = this._floatingGroups.find((x) => x.group === to);
9740
+ if (targetFloatingGroup) {
9741
+ const box = targetFloatingGroup.overlay.toJSON();
9742
+ // Calculate position based on available properties
9743
+ let left, top;
9744
+ if ('left' in box) {
9745
+ left = box.left + 50;
9746
+ }
9747
+ else if ('right' in box) {
9748
+ left = Math.max(0, box.right - box.width - 50);
9749
+ }
9750
+ else {
9751
+ left = 50; // Default fallback
9752
+ }
9753
+ if ('top' in box) {
9754
+ top = box.top + 50;
9755
+ }
9756
+ else if ('bottom' in box) {
9757
+ top = Math.max(0, box.bottom - box.height - 50);
9758
+ }
9759
+ else {
9760
+ top = 50; // Default fallback
9761
+ }
9762
+ this.addFloatingGroup(from, {
9763
+ height: box.height,
9764
+ width: box.width,
9765
+ position: {
9766
+ left,
9767
+ top,
9768
+ },
9769
+ });
9770
+ }
9771
+ }
9659
9772
  }
9660
9773
  from.panels.forEach((panel) => {
9661
9774
  this._onDidMovePanel.fire({ panel, from });
9662
9775
  });
9776
+ if (!options.skipSetActive) {
9777
+ this.doSetGroupAndPanelActive(from);
9778
+ }
9663
9779
  }
9664
9780
  doSetGroupActive(group) {
9665
9781
  super.doSetGroupActive(group);