dockview-core 6.2.1 → 6.3.0

package/dist/dockview-core.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.2.1
+ * @version 6.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -508,8 +508,10 @@
   function quasiDefaultPrevented(event) {
       return event[QUASI_PREVENT_DEFAULT_KEY];
   }
-  function addStyles(document, styleSheetList) {
+  function addStyles(document, styleSheetList, options = {}) {
       const styleSheets = Array.from(styleSheetList);
+      const { nonce } = options;
+      const resolvedNonce = typeof nonce === 'function' ? nonce(document) : nonce;
       for (const styleSheet of styleSheets) {
           if (styleSheet.href) {
               const link = document.createElement('link');
@@ -517,6 +519,10 @@
               link.type = styleSheet.type;
               link.rel = 'stylesheet';
               document.head.appendChild(link);
+              // The <link> will load and apply its rules in the target
+              // document. Reading cssRules here would duplicate them
+              // (and throws for cross-origin sheets).
+              continue;
           }
           let cssTexts = [];
           try {
@@ -527,11 +533,16 @@
           catch (err) {
               console.warn('dockview: failed to access stylesheet rules due to security restrictions', err);
           }
+          const fragment = document.createDocumentFragment();
           for (const rule of cssTexts) {
               const style = document.createElement('style');
+              if (resolvedNonce) {
+                  style.setAttribute('nonce', resolvedNonce);
+              }
               style.appendChild(document.createTextNode(rule));
-              document.head.appendChild(style);
+              fragment.appendChild(style);
           }
+          document.head.appendChild(fragment);
       }
   }
   function getDomNodePagePosition(domNode) {
@@ -5523,19 +5534,41 @@
           const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
           const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
           if (dataTransfer) {
-              const ghostElement = document.createElement('div');
-              ghostElement.style.backgroundColor = bgColor;
-              ghostElement.style.color = color;
-              ghostElement.style.padding = '2px 8px';
-              ghostElement.style.height = '24px';
-              ghostElement.style.fontSize = '11px';
-              ghostElement.style.lineHeight = '20px';
-              ghostElement.style.borderRadius = '12px';
-              ghostElement.style.position = 'absolute';
-              ghostElement.style.pointerEvents = 'none';
-              ghostElement.style.top = '-9999px';
-              ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+              const createGhost = this.accessor.options.createGroupDragGhostComponent;
+              let ghostElement;
+              let customRenderer;
+              if (createGhost) {
+                  customRenderer = createGhost(this.group);
+                  customRenderer.init({
+                      group: this.group,
+                      api: this.accessor.api,
+                  });
+                  ghostElement = customRenderer.element;
+                  ghostElement.style.position = 'absolute';
+                  ghostElement.style.pointerEvents = 'none';
+                  ghostElement.style.top = '-9999px';
+              }
+              else {
+                  ghostElement = document.createElement('div');
+                  ghostElement.style.backgroundColor = bgColor;
+                  ghostElement.style.color = color;
+                  ghostElement.style.padding = '2px 8px';
+                  ghostElement.style.height = '24px';
+                  ghostElement.style.fontSize = '11px';
+                  ghostElement.style.lineHeight = '20px';
+                  ghostElement.style.borderRadius = '12px';
+                  ghostElement.style.position = 'absolute';
+                  ghostElement.style.pointerEvents = 'none';
+                  ghostElement.style.top = '-9999px';
+                  ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+              }
               addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
+              if (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.dispose) {
+                  // addGhostImage removes the element from the DOM on the next
+                  // tick; dispose the framework renderer on the same schedule.
+                  const renderer = customRenderer;
+                  setTimeout(() => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }, 0);
+              }
           }
           return {
               dispose: () => {
@@ -5568,6 +5601,12 @@
           this.dropTarget = new Droptarget(this._element, {
               acceptedTargetZones: ['center'],
               canDisplayOverlay: (event, position) => {
+                  if (this.group.api.locked) {
+                      // Dropping on the void/header space adds the panel
+                      // to this group, which `locked` is meant to prevent
+                      // (both `true` and `'no-drop-target'`).
+                      return false;
+                  }
                   const data = getPanelData();
                   if (data && this.accessor.id === data.viewId) {
                       return true;
@@ -6149,7 +6188,7 @@
           let svg = underline.firstElementChild;
           let path;
           if (!svg || svg.tagName !== 'svg') {
-              underline.innerHTML = '';
+              underline.replaceChildren();
               svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
               svg.style.display = 'block';
               path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -6247,7 +6286,7 @@
           underline.style.display = '';
           // Clear any SVG content left over from a mode switch
           if (underline.firstElementChild) {
-              underline.innerHTML = '';
+              underline.replaceChildren();
           }
           underline.style.backgroundColor = color;
           if (isVertical) {
@@ -7640,11 +7679,15 @@
                   if (!isInsideRange && !isJustBeforeGroup) {
                       continue;
                   }
-                  if (isGroupDrag) {
+                  if (isGroupDrag && isInsideRange) {
                       // A group cannot be dropped inside another group.
                       // Snap the insertion index to just before or just
                       // after this group based on cursor position relative
-                      // to the group's midpoint.
+                      // to the group's midpoint. Only applies when the
+                      // insertion would land *inside* the group — for
+                      // `isJustBeforeGroup`, the index is already outside
+                      // (immediately left of the group) and is a valid
+                      // drop position, so leave it untouched (issue #1264).
                       const groupMid = (firstIdx + lastIdx + 1) / 2;
                       if (insertionIndex < groupMid) {
                           insertionIndex = firstIdx;
@@ -7655,6 +7698,12 @@
                       // targetTabGroupId stays null
                       break;
                   }
+                  if (isGroupDrag && isJustBeforeGroup) {
+                      // Cursor is just before the group — accept this
+                      // index as-is. Groups can be dropped at the slot
+                      // immediately left of another group's first tab.
+                      break;
+                  }
                   if (isJustBeforeGroup) {
                       // Check whether only the source tab (or source group
                       // tabs) sits between insertionIndex and firstIdx.
@@ -8496,6 +8545,7 @@
           disableFloatingGroups: undefined,
           floatingGroupBounds: undefined,
           popoutUrl: undefined,
+          nonce: undefined,
           defaultRenderer: undefined,
           defaultHeaderPosition: undefined,
           debug: undefined,
@@ -8511,6 +8561,7 @@
           getTabContextMenuItems: undefined,
           getTabGroupChipContextMenuItems: undefined,
           createTabGroupChipComponent: undefined,
+          createGroupDragGhostComponent: undefined,
           tabGroupColors: undefined,
           tabGroupAccent: undefined,
       };
@@ -9203,6 +9254,15 @@
       refreshTabGroupAccent() {
           this.tabsContainer.refreshTabGroupAccent();
       }
+      refreshWatermark() {
+          var _a, _b;
+          if (this.watermark) {
+              this.watermark.element.remove();
+              (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+              this.watermark = undefined;
+          }
+          this.updateContainer();
+      }
       getTabGroupForPanel(panelId) {
           return this._findTabGroupForPanel(panelId);
       }
@@ -10033,6 +10093,18 @@
           }
           return this._group.model.location;
       }
+      get locked() {
+          if (!this._group) {
+              throw new Error(NOT_INITIALIZED_MESSAGE);
+          }
+          return this._group.locked;
+      }
+      set locked(value) {
+          if (!this._group) {
+              throw new Error(NOT_INITIALIZED_MESSAGE);
+          }
+          this._group.locked = value;
+      }
       constructor(id, accessor) {
           super(id, '__dockviewgroup__');
           this.accessor = accessor;
@@ -10623,6 +10695,11 @@
           const didTitleChange = title !== this.title;
           if (didTitleChange) {
               this._title = title;
+              // keep the view-model's cached init params in sync so that tab
+              // renderers constructed lazily (e.g. the header overflow
+              // dropdown via createTabRenderer) see the updated title
+              // (#914).
+              this.view.setTitle(title);
               this.api._onDidTitleChange.fire({ title });
           }
       }
@@ -10783,6 +10860,14 @@
           this.content.init(params);
           this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
       }
+      setTitle(title) {
+          // keep the cached init params in sync so that tab renderers created
+          // lazily after the title changes (e.g. for the header overflow
+          // dropdown) see the current title rather than the stale original.
+          if (this._params) {
+              this._params.title = title;
+          }
+      }
       layout(width, height) {
           var _a, _b;
           (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);
@@ -11422,10 +11507,20 @@
                   focusContainer.style.top = `${top}px`;
                   focusContainer.style.width = `${width}px`;
                   focusContainer.style.height = `${height}px`;
-                  // Reveal after the first position is applied (was hidden to
-                  // prevent a flash at 0,0 before the initial layout fires).
-                  if (focusContainer.style.visibility === 'hidden') {
+                  // Sync visibility/pointer-events with the panel's current
+                  // visibility at paint time. visibilityChanged() may have
+                  // flipped to hidden between scheduling this rAF and now;
+                  // unconditionally clearing `visibility:hidden` here would
+                  // leave a hidden panel visually visible at a stale position,
+                  // because onDidDimensionsChange skips non-visible panels and
+                  // never recomputes their box on subsequent resizes.
+                  if (panel.api.isVisible) {
                       focusContainer.style.visibility = '';
+                      focusContainer.style.pointerEvents = '';
+                  }
+                  else {
+                      focusContainer.style.visibility = 'hidden';
+                      focusContainer.style.pointerEvents = 'none';
                   }
                   toggleClass(focusContainer, 'dv-render-overlay-float', panel.group.api.location.type === 'floating');
               });
@@ -11692,7 +11787,9 @@
                           const externalDocument = externalWindow.document;
                           externalDocument.title = document.title;
                           externalDocument.body.appendChild(container);
-                          addStyles(externalDocument, window.document.styleSheets);
+                          addStyles(externalDocument, window.document.styleSheets, {
+                              nonce: this.options.nonce,
+                          });
                           /**
                            * beforeunload must be registered after load for reasons I could not determine
                            * otherwise the beforeunload event will not fire when the window is closed
@@ -12882,6 +12979,7 @@
           this._floatingGroups = [];
           this._popoutGroups = [];
           this._popoutRestorationPromise = Promise.resolve();
+          this._popoutRestorationCleanups = new Set();
           this._onDidRemoveGroup = new Emitter();
           this.onDidRemoveGroup = this._onDidRemoveGroup.event;
           this._onDidAddGroup = new Emitter();
@@ -12987,6 +13085,14 @@
               this._bufferOnDidLayoutChange.fire();
           }), exports.DockviewDisposable.from(() => {
               var _a;
+              // Cancel any pending popout-restoration timers scheduled by
+              // fromJSON so they don't open new browser windows after
+              // dispose, and resolve their promises so callers awaiting
+              // popoutRestorationPromise don't hang. See issue #851.
+              for (const cleanup of [...this._popoutRestorationCleanups]) {
+                  cleanup();
+              }
+              this._popoutRestorationCleanups.clear();
               // iterate over a copy of the array since .dispose() mutates the original array
               for (const group of [...this._floatingGroups]) {
                   group.dispose();
@@ -13083,7 +13189,7 @@
           return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
       }
       addPopoutGroup(itemToPopout, options) {
-          var _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f;
           if (itemToPopout instanceof DockviewGroupPanel &&
               itemToPopout.model.location.type === 'edge') {
               // edge groups are permanent structural elements and cannot be popped out
@@ -13118,6 +13224,7 @@
               height: box.height,
               onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
               onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
+              nonce: (_f = this.options) === null || _f === void 0 ? void 0 : _f.nonce,
           });
           const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
               popoutWindowDisposable.dispose();
@@ -13535,7 +13642,7 @@
           }
       }
       updateOptions(options) {
-          var _a, _b, _c;
+          var _a, _b, _c, _d, _e;
           super.updateOptions(options);
           if ('floatingGroupBounds' in options) {
               for (const group of this._floatingGroups) {
@@ -13576,8 +13683,19 @@
                   group.model.updateHeaderActions();
               }
           }
+          if ('createWatermarkComponent' in options) {
+              if (this._watermark) {
+                  this._watermark.element.parentElement.remove();
+                  (_d = (_c = this._watermark).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
+                  this._watermark = null;
+              }
+              this.updateWatermark();
+              for (const group of this.groups) {
+                  group.model.refreshWatermark();
+              }
+          }
           if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
-              this._tabGroupColorPalette.setEntries((_c = this._options.tabGroupColors) !== null && _c !== void 0 ? _c : DEFAULT_TAB_GROUP_COLORS);
+              this._tabGroupColorPalette.setEntries((_e = this._options.tabGroupColors) !== null && _e !== void 0 ? _e : DEFAULT_TAB_GROUP_COLORS);
               this._tabGroupColorPalette.enabled =
                   this._options.tabGroupAccent !== 'off';
               for (const group of this.groups) {
@@ -14003,7 +14121,23 @@
                   const group = createGroupFromSerializedState(data);
                   // Add a small delay for each popup after the first to avoid browser popup blocking
                   const popoutPromise = new Promise((resolve) => {
-                      setTimeout(() => {
+                      const cleanup = () => {
+                          this._popoutRestorationCleanups.delete(cleanup);
+                          clearTimeout(handle);
+                          resolve();
+                      };
+                      const handle = setTimeout(() => {
+                          this._popoutRestorationCleanups.delete(cleanup);
+                          // Guard against the component being disposed before
+                          // this timer fires. Under React StrictMode the
+                          // component is mounted -> disposed -> remounted, and
+                          // without this guard the first instance's queued
+                          // restoration would open a second popout window.
+                          // See issue #851.
+                          if (this.isDisposed) {
+                              resolve();
+                              return;
+                          }
                           this.addPopoutGroup(group, {
                               position: position !== null && position !== void 0 ? position : undefined,
                               overridePopoutGroup: gridReferenceGroup
@@ -14016,6 +14150,7 @@
                           });
                           resolve();
                       }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                      this._popoutRestorationCleanups.add(cleanup);
                   });
                   popoutPromises.push(popoutPromise);
               });
@@ -14546,8 +14681,11 @@
                        * the source group is a popout group with a single panel
                        *
                        * 1. remove the panel from the group without triggering any events
-                       * 2. remove the popout group
-                       * 3. create a new group at the requested location and add that panel
+                       * 2. remove the popout group — this may cascade-remove the empty
+                       *    reference group it left behind in the main grid (see
+                       *    doRemoveGroup for popout groups), which can shift grid indices
+                       * 3. recompute the target location now that the grid is stable
+                       * 4. create a new group at the recomputed location and add that panel
                        */
                       const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
                       const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
@@ -14555,7 +14693,8 @@
                           skipSetActiveGroup: true,
                       }));
                       this.doRemoveGroup(sourceGroup, { skipActive: true });
-                      const newGroup = this.createGroupAtLocation(targetLocation);
+                      const updatedTargetLocation = getRelativeLocation(this.gridview.orientation, getGridLocation(destinationGroup.element), destinationTarget);
+                      const newGroup = this.createGroupAtLocation(updatedTargetLocation);
                       this.movingLock(() => newGroup.model.openPanel(removedPanel, {
                           skipSetActive: true,
                       }));