dockview-core 1.8.4 → 1.9.0

package/dist/esm/dnd/overlay.js

@@ -1,305 +1,305 @@
-import { getElementsByTagName, quasiDefaultPrevented, toggleClass, } from '../dom';
-import { Emitter, addDisposableListener, addDisposableWindowListener, } from '../events';
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
-import { clamp } from '../math';
-const bringElementToFront = (() => {
-    let previous = null;
-    function pushToTop(element) {
-        if (previous !== element && previous !== null) {
-            toggleClass(previous, 'dv-bring-to-front', false);
-        }
-        toggleClass(element, 'dv-bring-to-front', true);
-        previous = element;
-    }
-    return pushToTop;
-})();
-export class Overlay extends CompositeDisposable {
-    set minimumInViewportWidth(value) {
-        this.options.minimumInViewportWidth = value;
-    }
-    set minimumInViewportHeight(value) {
-        this.options.minimumInViewportHeight = value;
-    }
-    constructor(options) {
-        super();
-        this.options = options;
-        this._element = document.createElement('div');
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this._onDidChangeEnd = new Emitter();
-        this.onDidChangeEnd = this._onDidChangeEnd.event;
-        this.addDisposables(this._onDidChange, this._onDidChangeEnd);
-        this._element.className = 'dv-resize-container';
-        this.setupResize('top');
-        this.setupResize('bottom');
-        this.setupResize('left');
-        this.setupResize('right');
-        this.setupResize('topleft');
-        this.setupResize('topright');
-        this.setupResize('bottomleft');
-        this.setupResize('bottomright');
-        this._element.appendChild(this.options.content);
-        this.options.container.appendChild(this._element);
-        // if input bad resize within acceptable boundaries
-        this.setBounds({
-            height: this.options.height,
-            width: this.options.width,
-            top: this.options.top,
-            left: this.options.left,
-        });
-    }
-    setBounds(bounds = {}) {
-        if (typeof bounds.height === 'number') {
-            this._element.style.height = `${bounds.height}px`;
-        }
-        if (typeof bounds.width === 'number') {
-            this._element.style.width = `${bounds.width}px`;
-        }
-        if (typeof bounds.top === 'number') {
-            this._element.style.top = `${bounds.top}px`;
-        }
-        if (typeof bounds.left === 'number') {
-            this._element.style.left = `${bounds.left}px`;
-        }
-        const containerRect = this.options.container.getBoundingClientRect();
-        const overlayRect = this._element.getBoundingClientRect();
-        // region: ensure bounds within allowable limits
-        // a minimum width of minimumViewportWidth must be inside the viewport
-        const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
-        // a minimum height of minimumViewportHeight must be inside the viewport
-        const yOffset = typeof this.options.minimumInViewportHeight === 'number'
-            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
-            : 0;
-        const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
-        const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-        this._element.style.left = `${left}px`;
-        this._element.style.top = `${top}px`;
-        this._onDidChange.fire();
-    }
-    toJSON() {
-        const container = this.options.container.getBoundingClientRect();
-        const element = this._element.getBoundingClientRect();
-        return {
-            top: element.top - container.top,
-            left: element.left - container.left,
-            width: element.width,
-            height: element.height,
-        };
-    }
-    setupDrag(dragTarget, options = { inDragMode: false }) {
-        const move = new MutableDisposable();
-        const track = () => {
-            let offset = null;
-            const iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
-            move.value = new CompositeDisposable({
-                dispose: () => {
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
-                },
-            }, addDisposableWindowListener(window, 'mousemove', (e) => {
-                const containerRect = this.options.container.getBoundingClientRect();
-                const x = e.clientX - containerRect.left;
-                const y = e.clientY - containerRect.top;
-                toggleClass(this._element, 'dv-resize-container-dragging', true);
-                const overlayRect = this._element.getBoundingClientRect();
-                if (offset === null) {
-                    offset = {
-                        x: e.clientX - overlayRect.left,
-                        y: e.clientY - overlayRect.top,
-                    };
-                }
-                const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
-                const yOffset = Math.max(0, this.options.minimumInViewportHeight
-                    ? this.getMinimumHeight(overlayRect.height)
-                    : 0);
-                const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
-                const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                this.setBounds({ top, left });
-            }), addDisposableWindowListener(window, 'mouseup', () => {
-                toggleClass(this._element, 'dv-resize-container-dragging', false);
-                move.dispose();
-                this._onDidChangeEnd.fire();
-            }));
-        };
-        this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
-            if (event.defaultPrevented) {
-                event.preventDefault();
-                return;
-            }
-            // if somebody has marked this event then treat as a defaultPrevented
-            // without actually calling event.preventDefault()
-            if (quasiDefaultPrevented(event)) {
-                return;
-            }
-            track();
-        }), addDisposableListener(this.options.content, 'mousedown', (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            // if somebody has marked this event then treat as a defaultPrevented
-            // without actually calling event.preventDefault()
-            if (quasiDefaultPrevented(event)) {
-                return;
-            }
-            if (event.shiftKey) {
-                track();
-            }
-        }), addDisposableListener(this.options.content, 'mousedown', () => {
-            bringElementToFront(this._element);
-        }, true));
-        bringElementToFront(this._element);
-        if (options.inDragMode) {
-            track();
-        }
-    }
-    setupResize(direction) {
-        const resizeHandleElement = document.createElement('div');
-        resizeHandleElement.className = `dv-resize-handle-${direction}`;
-        this._element.appendChild(resizeHandleElement);
-        const move = new MutableDisposable();
-        this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
-            e.preventDefault();
-            let startPosition = null;
-            const iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
-            move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
-                const containerRect = this.options.container.getBoundingClientRect();
-                const overlayRect = this._element.getBoundingClientRect();
-                const y = e.clientY - containerRect.top;
-                const x = e.clientX - containerRect.left;
-                if (startPosition === null) {
-                    // record the initial dimensions since as all subsequence moves are relative to this
-                    startPosition = {
-                        originalY: y,
-                        originalHeight: overlayRect.height,
-                        originalX: x,
-                        originalWidth: overlayRect.width,
-                    };
-                }
-                let top = undefined;
-                let height = undefined;
-                let left = undefined;
-                let width = undefined;
-                const moveTop = () => {
-                    top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
-                        startPosition.originalHeight >
-                        containerRect.height
-                        ? this.getMinimumHeight(containerRect.height)
-                        : Math.max(0, startPosition.originalY +
-                            startPosition.originalHeight -
-                            Overlay.MINIMUM_HEIGHT));
-                    height =
-                        startPosition.originalY +
-                            startPosition.originalHeight -
-                            top;
-                };
-                const moveBottom = () => {
-                    top =
-                        startPosition.originalY -
-                            startPosition.originalHeight;
-                    height = clamp(y - top, top < 0 &&
-                        typeof this.options
-                            .minimumInViewportHeight === 'number'
-                        ? -top +
-                            this.options.minimumInViewportHeight
-                        : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                };
-                const moveLeft = () => {
-                    left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
-                        startPosition.originalWidth >
-                        containerRect.width
-                        ? this.getMinimumWidth(containerRect.width)
-                        : Math.max(0, startPosition.originalX +
-                            startPosition.originalWidth -
-                            Overlay.MINIMUM_WIDTH));
-                    width =
-                        startPosition.originalX +
-                            startPosition.originalWidth -
-                            left;
-                };
-                const moveRight = () => {
-                    left =
-                        startPosition.originalX -
-                            startPosition.originalWidth;
-                    width = clamp(x - left, left < 0 &&
-                        typeof this.options
-                            .minimumInViewportWidth === 'number'
-                        ? -left +
-                            this.options.minimumInViewportWidth
-                        : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                };
-                switch (direction) {
-                    case 'top':
-                        moveTop();
-                        break;
-                    case 'bottom':
-                        moveBottom();
-                        break;
-                    case 'left':
-                        moveLeft();
-                        break;
-                    case 'right':
-                        moveRight();
-                        break;
-                    case 'topleft':
-                        moveTop();
-                        moveLeft();
-                        break;
-                    case 'topright':
-                        moveTop();
-                        moveRight();
-                        break;
-                    case 'bottomleft':
-                        moveBottom();
-                        moveLeft();
-                        break;
-                    case 'bottomright':
-                        moveBottom();
-                        moveRight();
-                        break;
-                }
-                this.setBounds({ height, width, top, left });
-            }), {
-                dispose: () => {
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
-                },
-            }, addDisposableWindowListener(window, 'mouseup', () => {
-                move.dispose();
-                this._onDidChangeEnd.fire();
-            }));
-        }));
-    }
-    getMinimumWidth(width) {
-        if (typeof this.options.minimumInViewportWidth === 'number') {
-            return width - this.options.minimumInViewportWidth;
-        }
-        return 0;
-    }
-    getMinimumHeight(height) {
-        if (typeof this.options.minimumInViewportHeight === 'number') {
-            return height - this.options.minimumInViewportHeight;
-        }
-        return height;
-    }
-    dispose() {
-        this._element.remove();
-        super.dispose();
-    }
-}
-Overlay.MINIMUM_HEIGHT = 20;
-Overlay.MINIMUM_WIDTH = 20;
+import { getElementsByTagName, quasiDefaultPrevented, toggleClass, } from '../dom';
+import { Emitter, addDisposableListener, addDisposableWindowListener, } from '../events';
+import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import { clamp } from '../math';
+const bringElementToFront = (() => {
+    let previous = null;
+    function pushToTop(element) {
+        if (previous !== element && previous !== null) {
+            toggleClass(previous, 'dv-bring-to-front', false);
+        }
+        toggleClass(element, 'dv-bring-to-front', true);
+        previous = element;
+    }
+    return pushToTop;
+})();
+export class Overlay extends CompositeDisposable {
+    set minimumInViewportWidth(value) {
+        this.options.minimumInViewportWidth = value;
+    }
+    set minimumInViewportHeight(value) {
+        this.options.minimumInViewportHeight = value;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+        this._element = document.createElement('div');
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._onDidChangeEnd = new Emitter();
+        this.onDidChangeEnd = this._onDidChangeEnd.event;
+        this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+        this._element.className = 'dv-resize-container';
+        this.setupResize('top');
+        this.setupResize('bottom');
+        this.setupResize('left');
+        this.setupResize('right');
+        this.setupResize('topleft');
+        this.setupResize('topright');
+        this.setupResize('bottomleft');
+        this.setupResize('bottomright');
+        this._element.appendChild(this.options.content);
+        this.options.container.appendChild(this._element);
+        // if input bad resize within acceptable boundaries
+        this.setBounds({
+            height: this.options.height,
+            width: this.options.width,
+            top: this.options.top,
+            left: this.options.left,
+        });
+    }
+    setBounds(bounds = {}) {
+        if (typeof bounds.height === 'number') {
+            this._element.style.height = `${bounds.height}px`;
+        }
+        if (typeof bounds.width === 'number') {
+            this._element.style.width = `${bounds.width}px`;
+        }
+        if (typeof bounds.top === 'number') {
+            this._element.style.top = `${bounds.top}px`;
+        }
+        if (typeof bounds.left === 'number') {
+            this._element.style.left = `${bounds.left}px`;
+        }
+        const containerRect = this.options.container.getBoundingClientRect();
+        const overlayRect = this._element.getBoundingClientRect();
+        // region: ensure bounds within allowable limits
+        // a minimum width of minimumViewportWidth must be inside the viewport
+        const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
+        // a minimum height of minimumViewportHeight must be inside the viewport
+        const yOffset = typeof this.options.minimumInViewportHeight === 'number'
+            ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+            : 0;
+        const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+        const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+        this._element.style.left = `${left}px`;
+        this._element.style.top = `${top}px`;
+        this._onDidChange.fire();
+    }
+    toJSON() {
+        const container = this.options.container.getBoundingClientRect();
+        const element = this._element.getBoundingClientRect();
+        return {
+            top: element.top - container.top,
+            left: element.left - container.left,
+            width: element.width,
+            height: element.height,
+        };
+    }
+    setupDrag(dragTarget, options = { inDragMode: false }) {
+        const move = new MutableDisposable();
+        const track = () => {
+            let offset = null;
+            const iframes = [
+                ...getElementsByTagName('iframe'),
+                ...getElementsByTagName('webview'),
+            ];
+            for (const iframe of iframes) {
+                iframe.style.pointerEvents = 'none';
+            }
+            move.value = new CompositeDisposable({
+                dispose: () => {
+                    for (const iframe of iframes) {
+                        iframe.style.pointerEvents = 'auto';
+                    }
+                },
+            }, addDisposableWindowListener(window, 'mousemove', (e) => {
+                const containerRect = this.options.container.getBoundingClientRect();
+                const x = e.clientX - containerRect.left;
+                const y = e.clientY - containerRect.top;
+                toggleClass(this._element, 'dv-resize-container-dragging', true);
+                const overlayRect = this._element.getBoundingClientRect();
+                if (offset === null) {
+                    offset = {
+                        x: e.clientX - overlayRect.left,
+                        y: e.clientY - overlayRect.top,
+                    };
+                }
+                const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
+                const yOffset = Math.max(0, this.options.minimumInViewportHeight
+                    ? this.getMinimumHeight(overlayRect.height)
+                    : 0);
+                const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                this.setBounds({ top, left });
+            }), addDisposableWindowListener(window, 'mouseup', () => {
+                toggleClass(this._element, 'dv-resize-container-dragging', false);
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            }));
+        };
+        this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                event.preventDefault();
+                return;
+            }
+            // if somebody has marked this event then treat as a defaultPrevented
+            // without actually calling event.preventDefault()
+            if (quasiDefaultPrevented(event)) {
+                return;
+            }
+            track();
+        }), addDisposableListener(this.options.content, 'mousedown', (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            // if somebody has marked this event then treat as a defaultPrevented
+            // without actually calling event.preventDefault()
+            if (quasiDefaultPrevented(event)) {
+                return;
+            }
+            if (event.shiftKey) {
+                track();
+            }
+        }), addDisposableListener(this.options.content, 'mousedown', () => {
+            bringElementToFront(this._element);
+        }, true));
+        bringElementToFront(this._element);
+        if (options.inDragMode) {
+            track();
+        }
+    }
+    setupResize(direction) {
+        const resizeHandleElement = document.createElement('div');
+        resizeHandleElement.className = `dv-resize-handle-${direction}`;
+        this._element.appendChild(resizeHandleElement);
+        const move = new MutableDisposable();
+        this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
+            e.preventDefault();
+            let startPosition = null;
+            const iframes = [
+                ...getElementsByTagName('iframe'),
+                ...getElementsByTagName('webview'),
+            ];
+            for (const iframe of iframes) {
+                iframe.style.pointerEvents = 'none';
+            }
+            move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
+                const containerRect = this.options.container.getBoundingClientRect();
+                const overlayRect = this._element.getBoundingClientRect();
+                const y = e.clientY - containerRect.top;
+                const x = e.clientX - containerRect.left;
+                if (startPosition === null) {
+                    // record the initial dimensions since as all subsequence moves are relative to this
+                    startPosition = {
+                        originalY: y,
+                        originalHeight: overlayRect.height,
+                        originalX: x,
+                        originalWidth: overlayRect.width,
+                    };
+                }
+                let top = undefined;
+                let height = undefined;
+                let left = undefined;
+                let width = undefined;
+                const moveTop = () => {
+                    top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                        startPosition.originalHeight >
+                        containerRect.height
+                        ? this.getMinimumHeight(containerRect.height)
+                        : Math.max(0, startPosition.originalY +
+                            startPosition.originalHeight -
+                            Overlay.MINIMUM_HEIGHT));
+                    height =
+                        startPosition.originalY +
+                            startPosition.originalHeight -
+                            top;
+                };
+                const moveBottom = () => {
+                    top =
+                        startPosition.originalY -
+                            startPosition.originalHeight;
+                    height = clamp(y - top, top < 0 &&
+                        typeof this.options
+                            .minimumInViewportHeight === 'number'
+                        ? -top +
+                            this.options.minimumInViewportHeight
+                        : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                };
+                const moveLeft = () => {
+                    left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                        startPosition.originalWidth >
+                        containerRect.width
+                        ? this.getMinimumWidth(containerRect.width)
+                        : Math.max(0, startPosition.originalX +
+                            startPosition.originalWidth -
+                            Overlay.MINIMUM_WIDTH));
+                    width =
+                        startPosition.originalX +
+                            startPosition.originalWidth -
+                            left;
+                };
+                const moveRight = () => {
+                    left =
+                        startPosition.originalX -
+                            startPosition.originalWidth;
+                    width = clamp(x - left, left < 0 &&
+                        typeof this.options
+                            .minimumInViewportWidth === 'number'
+                        ? -left +
+                            this.options.minimumInViewportWidth
+                        : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                };
+                switch (direction) {
+                    case 'top':
+                        moveTop();
+                        break;
+                    case 'bottom':
+                        moveBottom();
+                        break;
+                    case 'left':
+                        moveLeft();
+                        break;
+                    case 'right':
+                        moveRight();
+                        break;
+                    case 'topleft':
+                        moveTop();
+                        moveLeft();
+                        break;
+                    case 'topright':
+                        moveTop();
+                        moveRight();
+                        break;
+                    case 'bottomleft':
+                        moveBottom();
+                        moveLeft();
+                        break;
+                    case 'bottomright':
+                        moveBottom();
+                        moveRight();
+                        break;
+                }
+                this.setBounds({ height, width, top, left });
+            }), {
+                dispose: () => {
+                    for (const iframe of iframes) {
+                        iframe.style.pointerEvents = 'auto';
+                    }
+                },
+            }, addDisposableWindowListener(window, 'mouseup', () => {
+                move.dispose();
+                this._onDidChangeEnd.fire();
+            }));
+        }));
+    }
+    getMinimumWidth(width) {
+        if (typeof this.options.minimumInViewportWidth === 'number') {
+            return width - this.options.minimumInViewportWidth;
+        }
+        return 0;
+    }
+    getMinimumHeight(height) {
+        if (typeof this.options.minimumInViewportHeight === 'number') {
+            return height - this.options.minimumInViewportHeight;
+        }
+        return height;
+    }
+    dispose() {
+        this._element.remove();
+        super.dispose();
+    }
+}
+Overlay.MINIMUM_HEIGHT = 20;
+Overlay.MINIMUM_WIDTH = 20;
 //# sourceMappingURL=overlay.js.map