dockview-core 6.2.2 → 6.4.0

package/dist/esm/dom.js

@@ -132,8 +132,10 @@ export function quasiPreventDefault(event) {
 export function quasiDefaultPrevented(event) {
     return event[QUASI_PREVENT_DEFAULT_KEY];
 }
-export function addStyles(document, styleSheetList) {
+export 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');
@@ -141,6 +143,10 @@ export function addStyles(document, styleSheetList) {
             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 {
@@ -151,11 +157,16 @@ export function addStyles(document, styleSheetList) {
         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);
     }
 }
 export function getDomNodePagePosition(domNode) {
@@ -194,7 +205,7 @@ export function addTestId(element, id) {
  * Should be more efficient than element.querySelectorAll("*") since there
  * is no need to store every element in-memory using this approach
  */
-function allTagsNamesInclusiveOfShadowDoms(tagNames) {
+function allTagsNamesInclusiveOfShadowDoms(tagNames, rootNode) {
     const iframes = [];
     function findIframesInNode(node) {
         if (node.nodeType === Node.ELEMENT_NODE) {
@@ -209,11 +220,15 @@ function allTagsNamesInclusiveOfShadowDoms(tagNames) {
             }
         }
     }
-    findIframesInNode(document.documentElement);
+    // Document → walk from its root element. Element → walk from itself.
+    const startEl = rootNode instanceof Document
+        ? rootNode.documentElement
+        : rootNode;
+    findIframesInNode(startEl);
     return iframes;
 }
 export function disableIframePointEvents(rootNode = document) {
-    const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
+    const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW'], rootNode);
     const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
     for (const iframe of iframes) {
         original.set(iframe, iframe.style.pointerEvents);

package/dist/esm/index.d.ts

@@ -21,7 +21,7 @@ export { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, Dock
 export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
-export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, } from './dockview/framework';
+export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, IGroupDragGhostRenderer, } from './dockview/framework';
 export * from './dockview/options';
 export * from './dockview/theme';
 export * from './dockview/dockviewPanel';

package/dist/esm/overlay/overlay.d.ts

@@ -8,6 +8,11 @@ export declare class Overlay extends CompositeDisposable {
     readonly onDidChange: Event<void>;
     private readonly _onDidChangeEnd;
     readonly onDidChangeEnd: Event<void>;
+    private readonly _onDidStartMoving;
+    /** Fires once per drag, the first time the float actually moves. */
+    readonly onDidStartMoving: Event<void>;
+    private readonly _dragMove;
+    private _dragCancelled;
     private static readonly MINIMUM_HEIGHT;
     private static readonly MINIMUM_WIDTH;
     private verticalAlignment;
@@ -27,6 +32,13 @@ export declare class Overlay extends CompositeDisposable {
     bringToFront(): void;
     setBounds(bounds?: Partial<AnchoredBox>): void;
     toJSON(): AnchoredBox;
+    /**
+     * Abort an in-flight move-the-float drag. Used by the void container
+     * when a redock long-press fires after the move started, so the ghost
+     * gesture wins without the float continuing to follow the finger.
+     * Does not emit `onDidChangeEnd` because no change is being committed.
+     */
+    cancelPendingDrag(): void;
     setupDrag(dragTarget: HTMLElement, options?: {
         inDragMode: boolean;
     }): void;

package/dist/esm/overlay/overlay.js

@@ -1,6 +1,6 @@
 import { disableIframePointEvents, quasiDefaultPrevented, toggleClass, } from '../dom';
 import { Emitter, addDisposableListener } from '../events';
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../lifecycle';
 import { clamp } from '../math';
 class AriaLevelTracker {
     constructor() {
@@ -47,7 +47,12 @@ export class Overlay extends CompositeDisposable {
         this.onDidChange = this._onDidChange.event;
         this._onDidChangeEnd = new Emitter();
         this.onDidChangeEnd = this._onDidChangeEnd.event;
-        this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+        this._onDidStartMoving = new Emitter();
+        /** Fires once per drag, the first time the float actually moves. */
+        this.onDidStartMoving = this._onDidStartMoving.event;
+        this._dragMove = new MutableDisposable();
+        this._dragCancelled = false;
+        this.addDisposables(this._onDidChange, this._onDidChangeEnd, this._onDidStartMoving, this._dragMove);
         this._element.className = 'dv-resize-container';
         this._isVisible = true;
         this.setupResize('top');
@@ -156,16 +161,60 @@ export class Overlay extends CompositeDisposable {
         result.height = element.height;
         return result;
     }
+    /**
+     * Abort an in-flight move-the-float drag. Used by the void container
+     * when a redock long-press fires after the move started, so the ghost
+     * gesture wins without the float continuing to follow the finger.
+     * Does not emit `onDidChangeEnd` because no change is being committed.
+     */
+    cancelPendingDrag() {
+        if (!this._dragMove.value) {
+            return;
+        }
+        this._dragCancelled = true;
+        toggleClass(this._element, 'dv-resize-container-dragging', false);
+        this._dragMove.value = Disposable.NONE;
+    }
     setupDrag(dragTarget, options = { inDragMode: false }) {
-        const move = new MutableDisposable();
-        const track = () => {
+        const track = (captureTarget, pointerId) => {
             let offset = null;
+            let hasMoved = false;
+            this._dragCancelled = false;
             const iframes = disableIframePointEvents();
-            move.value = new CompositeDisposable({
+            if (captureTarget &&
+                typeof pointerId === 'number' &&
+                typeof captureTarget.setPointerCapture === 'function') {
+                try {
+                    captureTarget.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            const end = () => {
+                toggleClass(this._element, 'dv-resize-container-dragging', false);
+                this._dragMove.value = Disposable.NONE;
+                this._onDidChangeEnd.fire();
+            };
+            this._dragMove.value = new CompositeDisposable({
                 dispose: () => {
                     iframes.release();
+                    if (captureTarget &&
+                        typeof pointerId === 'number' &&
+                        typeof captureTarget.releasePointerCapture ===
+                            'function') {
+                        try {
+                            captureTarget.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
             }, addDisposableListener(window, 'pointermove', (e) => {
+                if (this._dragCancelled) {
+                    return;
+                }
                 const containerRect = this.options.container.getBoundingClientRect();
                 const x = e.clientX - containerRect.left;
                 const y = e.clientY - containerRect.top;
@@ -202,13 +251,13 @@ export class Overlay extends CompositeDisposable {
                     bounds.right = right;
                 }
                 this.setBounds(bounds);
-            }), addDisposableListener(window, 'pointerup', () => {
-                toggleClass(this._element, 'dv-resize-container-dragging', false);
-                move.dispose();
-                this._onDidChangeEnd.fire();
-            }));
+                if (!hasMoved) {
+                    hasMoved = true;
+                    this._onDidStartMoving.fire();
+                }
+            }), addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
         };
-        this.addDisposables(move, addDisposableListener(dragTarget, 'pointerdown', (event) => {
+        this.addDisposables(addDisposableListener(dragTarget, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 event.preventDefault();
                 return;
@@ -218,7 +267,7 @@ export class Overlay extends CompositeDisposable {
             if (quasiDefaultPrevented(event)) {
                 return;
             }
-            track();
+            track(dragTarget, event.pointerId);
         }), addDisposableListener(this.options.content, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
@@ -229,7 +278,7 @@ export class Overlay extends CompositeDisposable {
                 return;
             }
             if (event.shiftKey) {
-                track();
+                track(this.options.content, event.pointerId);
             }
         }), addDisposableListener(this.options.content, 'pointerdown', () => {
             arialLevelTracker.push(this._element);
@@ -247,6 +296,19 @@ export class Overlay extends CompositeDisposable {
             e.preventDefault();
             let startPosition = null;
             const iframes = disableIframePointEvents();
+            const pointerId = e.pointerId;
+            if (typeof resizeHandleElement.setPointerCapture === 'function') {
+                try {
+                    resizeHandleElement.setPointerCapture(pointerId);
+                }
+                catch (_a) {
+                    // ignore – non-fatal if the browser refuses capture
+                }
+            }
+            const end = () => {
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            };
             move.value = new CompositeDisposable(addDisposableListener(window, 'pointermove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
                 const overlayRect = this._element.getBoundingClientRect();
@@ -381,11 +443,17 @@ export class Overlay extends CompositeDisposable {
             }), {
                 dispose: () => {
                     iframes.release();
+                    if (typeof resizeHandleElement.releasePointerCapture ===
+                        'function') {
+                        try {
+                            resizeHandleElement.releasePointerCapture(pointerId);
+                        }
+                        catch (_a) {
+                            // ignore – pointer may already be released
+                        }
+                    }
                 },
-            }, addDisposableListener(window, 'pointerup', () => {
-                move.dispose();
-                this._onDidChangeEnd.fire();
-            }));
+            }, addDisposableListener(window, 'pointerup', end), addDisposableListener(window, 'pointercancel', end));
         }));
     }
     getMinimumWidth(width) {

package/dist/esm/paneview/draggablePaneviewPanel.d.ts

@@ -12,8 +12,10 @@ export interface PaneviewDidDropEvent extends DroptargetEvent {
     api: PaneviewApi;
 }
 export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
-    private handler;
+    private html5DragSource;
+    private pointerDragSource;
     private target;
+    private pointerTarget;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<PaneviewDidDropEvent>;
     private readonly _onUnhandledDragOverEvent;

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -1,7 +1,6 @@
 import { PaneviewApi } from '../api/component.api';
-import { DragHandler } from '../dnd/abstractDragHandler';
+import { html5Backend, pointerBackend, } from '../dnd/backend';
 import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
-import { Droptarget } from '../dnd/droptarget';
 import { Emitter } from '../events';
 import { PaneviewUnhandledDragOverEvent, } from './options';
 import { PaneviewPanel, } from './paneviewPanel';
@@ -35,35 +34,42 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         const id = this.id;
         const accessorId = this.accessor.id;
         this.header.draggable = true;
-        this.handler = new (class PaneDragHandler extends DragHandler {
-            getData() {
+        const sharedDragOptions = {
+            getData: () => {
                 LocalSelectionTransfer.getInstance().setData([new PaneTransfer(accessorId, id)], PaneTransfer.prototype);
                 return {
                     dispose: () => {
                         LocalSelectionTransfer.getInstance().clearData(PaneTransfer.prototype);
                     },
                 };
+            },
+        };
+        this.html5DragSource = html5Backend.createDragSource(this.header, sharedDragOptions);
+        this.pointerDragSource = pointerBackend.createDragSource(this.header, sharedDragOptions);
+        const canDisplayOverlay = (event, position) => {
+            const data = getPaneData();
+            if (data) {
+                if (data.paneId !== this.id &&
+                    data.viewId === this.accessor.id) {
+                    return true;
+                }
             }
-        })(this.header);
-        this.target = new Droptarget(this.element, {
+            const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
+            this._onUnhandledDragOverEvent.fire(firedEvent);
+            return firedEvent.isAccepted;
+        };
+        const dropTargetOptions = {
             acceptedTargetZones: ['top', 'bottom'],
             overlayModel: {
                 activationSize: { type: 'percentage', value: 50 },
             },
-            canDisplayOverlay: (event, position) => {
-                const data = getPaneData();
-                if (data) {
-                    if (data.paneId !== this.id &&
-                        data.viewId === this.accessor.id) {
-                        return true;
-                    }
-                }
-                const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
-                this._onUnhandledDragOverEvent.fire(firedEvent);
-                return firedEvent.isAccepted;
-            },
-        });
-        this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
+            canDisplayOverlay,
+        };
+        this.target = html5Backend.createDropTarget(this.element, dropTargetOptions);
+        this.pointerTarget = pointerBackend.createDropTarget(this.element, dropTargetOptions);
+        this.addDisposables(this._onDidDrop, this.html5DragSource, this.pointerDragSource, this.target, this.pointerTarget, this.target.onDrop((event) => {
+            this.onDrop(event);
+        }), this.pointerTarget.onDrop((event) => {
             this.onDrop(event);
         }));
     }

package/dist/esm/paneview/options.d.ts

@@ -15,15 +15,16 @@ export interface PaneviewFrameworkOptions {
 export type PaneviewComponentOptions = PaneviewOptions & PaneviewFrameworkOptions;
 export declare const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[];
 export interface PaneviewDndOverlayEvent extends IAcceptableEvent {
-    nativeEvent: DragEvent;
+    /** Narrow with `instanceof DragEvent` before reading `dataTransfer`. */
+    nativeEvent: DragEvent | PointerEvent;
     position: Position;
     panel: IPaneviewPanel;
     getData: () => PaneTransfer | undefined;
 }
 export declare class PaneviewUnhandledDragOverEvent extends AcceptableEvent implements PaneviewDndOverlayEvent {
-    readonly nativeEvent: DragEvent;
+    readonly nativeEvent: DragEvent | PointerEvent;
     readonly position: Position;
     readonly getData: () => PaneTransfer | undefined;
     readonly panel: IPaneviewPanel;
-    constructor(nativeEvent: DragEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
+    constructor(nativeEvent: DragEvent | PointerEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
 }

package/dist/esm/popoutWindow.d.ts

@@ -1,3 +1,4 @@
+import { CspNonceProvider } from './dom';
 import { CompositeDisposable } from './lifecycle';
 import { Box } from './types';
 export type PopoutWindowOptions = {
@@ -10,6 +11,7 @@ export type PopoutWindowOptions = {
         id: string;
         window: Window;
     }) => void;
+    nonce?: CspNonceProvider;
 } & Box;
 /**
  * Reject popout URLs that aren't same-origin http(s). Blocks `javascript:`,

package/dist/esm/popoutWindow.js

@@ -133,7 +133,9 @@ export class PopoutWindow extends CompositeDisposable {
                         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