@datagrok-libraries/dock-spawn-dg 0.0.1

package/src/DockManagerContext.ts

@@ -0,0 +1,16 @@
+import { DockModel } from "./DockModel.js";
+import { DockManager } from "./DockManager.js";
+import { DocumentManagerContainer } from "./DocumentManagerContainer.js";
+
+export class DockManagerContext {
+
+    dockManager: DockManager;
+    model: DockModel;
+    documentManagerView: DocumentManagerContainer;
+    
+    constructor(dockManager : DockManager) {
+        this.dockManager = dockManager;
+        this.model = new DockModel();
+        this.documentManagerView = new DocumentManagerContainer(this.dockManager);
+    }
+}

package/src/DockModel.ts

@@ -0,0 +1,12 @@
+import { DockNode } from "./DockNode.js";
+import { Dialog } from "./Dialog.js";
+
+export class DockModel {
+    rootNode: DockNode;
+    documentManagerNode: DockNode;
+    dialogs: Dialog[]
+
+    constructor() {
+        this.rootNode = this.documentManagerNode = undefined;
+    }
+}

package/src/DockNode.ts

@@ -0,0 +1,81 @@
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+
+export class DockNode {
+
+    parent: DockNode;
+    container: IDockContainer;
+    children: DockNode[];
+
+    constructor(container: IDockContainer) {
+        /** The dock container represented by this node */
+        this.container = container;
+        this.children = [];
+    }
+
+    detachFromParent() {
+        if (this.parent) {
+            this.parent.removeChild(this);
+            delete this.parent;
+        }
+    }
+
+    removeChild(childNode: DockNode) {
+        let index = this.children.indexOf(childNode);
+        if (index >= 0)
+            this.children.splice(index, 1);
+    }
+
+    addChild(childNode: DockNode) {
+        childNode.detachFromParent();
+        childNode.parent = this;
+        this.children.push(childNode);
+    }
+
+    addChildBefore(referenceNode: DockNode, childNode: DockNode) {
+        this._addChildWithDirection(referenceNode, childNode, true);
+    }
+
+    addChildAfter(referenceNode: DockNode, childNode: DockNode) {
+        this._addChildWithDirection(referenceNode, childNode, false);
+    }
+
+    _addChildWithDirection(referenceNode: DockNode, childNode: DockNode, before: boolean) {
+        // Detach this node from it's parent first
+        childNode.detachFromParent();
+        childNode.parent = this;
+
+        let referenceIndex = this.children.indexOf(referenceNode);
+        let preList = this.children.slice(0, referenceIndex);
+        let postList = this.children.slice(referenceIndex + 1, this.children.length);
+
+        this.children = preList.slice(0);
+        if (before) {
+            this.children.push(childNode);
+            this.children.push(referenceNode);
+        }
+        else {
+            this.children.push(referenceNode);
+            this.children.push(childNode);
+        }
+        Array.prototype.push.apply(this.children, postList);
+    }
+
+    performLayout(relayoutEvenIfEqual: boolean) {
+        let childContainers = this.children.map((childNode) => { return childNode.container; });
+        this.container.performLayout(childContainers, relayoutEvenIfEqual);
+    }
+
+    debugDumpTree(indent: number) {
+        if (indent === undefined)
+            indent = 0;
+
+        let message = this.container.name;
+        for (let i = 0; i < indent; i++)
+            message = '\t' + message;
+
+        let parentType = this.parent === undefined ? 'null' : this.parent.container.containerType;
+        console.log('>>' + message + ' [' + parentType + ']');
+
+        this.children.forEach((childNode) => { childNode.debugDumpTree(indent + 1); });
+    }
+}

package/src/DockWheel.ts

@@ -0,0 +1,215 @@
+import { Utils } from "./Utils.js";
+import { DockManager } from "./DockManager.js";
+import { DockWheelItem } from "./DockWheelItem.js";
+import { WheelTypes } from "./enums/WheelTypes.js";
+import { Dialog } from "./Dialog.js";
+import { DockNode } from "./DockNode.js";
+
+/**
+ * Manages the dock overlay buttons that are displayed over the dock manager
+ */
+export class DockWheel {
+    dockManager: DockManager;
+    elementMainWheel: HTMLDivElement;
+    elementSideWheel: HTMLDivElement;
+    wheelItems: { [index in WheelTypes]?: DockWheelItem; };
+    elementPanelPreview: HTMLDivElement;
+    activeDialog: Dialog;
+    _activeNode?: DockNode;
+    _visible: boolean;
+
+    constructor(dockManager: DockManager) {
+        this.dockManager = dockManager;
+        this.elementMainWheel = document.createElement('div');    // Contains the main wheel's 5 dock buttons
+        this.elementSideWheel = document.createElement('div');    // Contains the 4 buttons on the side
+        this.wheelItems = {};
+        for (let wheelType in WheelTypes) {
+            this.wheelItems[wheelType] = new DockWheelItem(this, <WheelTypes>wheelType);
+            if (wheelType.substr(-2, 2) === '-s')
+                // Side button
+                this.elementSideWheel.appendChild(this.wheelItems[wheelType].element);
+            else
+                // Main dock wheel button
+                this.elementMainWheel.appendChild(this.wheelItems[wheelType].element);
+        };
+
+        let zIndex = 9000000;
+        this.elementMainWheel.classList.add('dock-wheel-base');
+        this.elementSideWheel.classList.add('dock-wheel-base');
+        this.elementMainWheel.style.zIndex = String(zIndex + 1);
+        this.elementSideWheel.style.zIndex = String(zIndex);
+        this.elementPanelPreview = document.createElement('div');
+        this.elementPanelPreview.classList.add('dock-wheel-panel-preview');
+        this.elementPanelPreview.style.zIndex = String(zIndex - 1);
+        this.activeDialog = undefined;  // The dialog being dragged, when the wheel is visible
+        this._activeNode = undefined;
+        this._visible = false;
+    }
+
+    /** The node over which the dock wheel is being displayed on */
+    get activeNode(): DockNode {
+        return this._activeNode;
+    }
+    set activeNode(value: DockNode) {
+        let previousValue = this._activeNode;
+        this._activeNode = value;
+
+        if (previousValue !== this._activeNode) {
+            // The active node has been changed.
+            // Reattach the wheel to the new node's element and show it again
+            if (this._visible)
+                this.showWheel();
+        }
+    }
+
+    showWheel() {
+        this._visible = true;
+        if (!this.activeNode) {
+            // No active node selected. make sure the wheel is invisible
+            Utils.removeNode(this.elementMainWheel);
+            Utils.removeNode(this.elementSideWheel);
+            return;
+        }
+        let element = this.activeNode.container.containerElement;
+        let containerWidth = element.clientWidth;
+        let containerHeight = element.clientHeight;
+        let baseX = Math.floor(containerWidth / 2); // + element.offsetLeft;
+        let baseY = Math.floor(containerHeight / 2); // + element.offsetTop;
+        let bcElement = element.getBoundingClientRect();
+        let bcdockManagerElement = this.dockManager.element.getBoundingClientRect()
+        this.elementMainWheel.style.left = (bcElement.left - bcdockManagerElement.left + baseX) + 'px';
+        this.elementMainWheel.style.top = (bcElement.top - bcdockManagerElement.top + baseY) + 'px';
+
+        // The positioning of the main dock wheel buttons is done automatically through CSS
+        // Dynamically calculate the positions of the buttons on the extreme sides of the dock manager
+        let sideMargin = 20;
+        let dockManagerWidth = this.dockManager.element.clientWidth;
+        let dockManagerHeight = this.dockManager.element.clientHeight;
+
+        Utils.removeNode(this.elementMainWheel);
+        Utils.removeNode(this.elementSideWheel);
+        this.dockManager.element.appendChild(this.elementMainWheel);
+        this.dockManager.element.appendChild(this.elementSideWheel);
+
+        this._setWheelButtonPosition(WheelTypes["left-s"], sideMargin, -dockManagerHeight / 2);
+        this._setWheelButtonPosition(WheelTypes["right-s"], dockManagerWidth - sideMargin * 2, -dockManagerHeight / 2);
+        this._setWheelButtonPosition(WheelTypes["top-s"], dockManagerWidth / 2, -dockManagerHeight + sideMargin);
+        this._setWheelButtonPosition(WheelTypes["down-s"], dockManagerWidth / 2, -sideMargin);
+    }
+
+    _setWheelButtonPosition(wheelId: WheelTypes, left: number, top: number) {
+        let item = this.wheelItems[wheelId];
+        let itemHalfWidth = item.element.clientWidth / 2;
+        let itemHalfHeight = item.element.clientHeight / 2;
+
+        let x = Math.floor(left - itemHalfWidth);
+        let y = Math.floor(top - itemHalfHeight);
+        //    item.element.style.left = '${x}px';
+        //    item.element.style.top = '${y}px';
+        item.element.style.marginLeft = x + 'px';
+        item.element.style.marginTop = y + 'px';
+    }
+
+    hideWheel() {
+        this._visible = false;
+        this.activeNode = undefined;
+        Utils.removeNode(this.elementMainWheel);
+        Utils.removeNode(this.elementSideWheel);
+        Utils.removeNode(this.elementPanelPreview);
+
+        // deactivate all wheels
+        for (let wheelType in this.wheelItems)
+            this.wheelItems[wheelType].active = false;
+    }
+
+    onMouseOver(wheelItem: DockWheelItem) {
+        if (!this.activeDialog)
+            return;
+
+        // Display the preview panel to show where the panel would be docked
+        let rootNode = this.dockManager.context.model.rootNode;
+        let bounds;
+        if (wheelItem.id === WheelTypes.top) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(this.activeNode, this.activeDialog.panel, 'vertical', true);
+        } else if (wheelItem.id === WheelTypes.down) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(this.activeNode, this.activeDialog.panel, 'vertical', false);
+        } else if (wheelItem.id === WheelTypes.left) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(this.activeNode, this.activeDialog.panel, 'horizontal', true);
+        } else if (wheelItem.id === WheelTypes.right) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(this.activeNode, this.activeDialog.panel, 'horizontal', false);
+        } else if (wheelItem.id === WheelTypes.fill) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(this.activeNode, this.activeDialog.panel, 'fill', false);
+        } else if (wheelItem.id === WheelTypes["top-s"]) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(rootNode, this.activeDialog.panel, 'vertical', true);
+        } else if (wheelItem.id === WheelTypes["down-s"]) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(rootNode, this.activeDialog.panel, 'vertical', false);
+        } else if (wheelItem.id === WheelTypes["left-s"]) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(rootNode, this.activeDialog.panel, 'horizontal', true);
+        } else if (wheelItem.id === WheelTypes["right-s"]) {
+            bounds = this.dockManager.layoutEngine.getDockBounds(rootNode, this.activeDialog.panel, 'horizontal', false);
+        }
+
+        if (bounds) {
+            this.dockManager.element.appendChild(this.elementPanelPreview);
+            this.elementPanelPreview.style.left = Math.round(bounds.x) + 'px';
+            this.elementPanelPreview.style.top = Math.round(bounds.y) + 'px';
+            this.elementPanelPreview.style.width = Math.round(bounds.width) + 'px';
+            this.elementPanelPreview.style.height = Math.round(bounds.height) + 'px';
+        }
+    }
+
+    onMouseOut() {
+        Utils.removeNode(this.elementPanelPreview);
+    }
+
+    /**
+     * Called if the dialog is dropped in a dock panel.
+     * The dialog might not necessarily be dropped in one of the dock wheel buttons,
+     * in which case the request will be ignored
+     */
+    onDialogDropped(dialog: Dialog) {
+        // Check if the dialog was dropped in one of the wheel items
+        let wheelItem = this._getActiveWheelItem();
+        if (wheelItem)
+            this._handleDockRequest(wheelItem, dialog);
+    }
+
+    /**
+     * Returns the wheel item which has the mouse cursor on top of it
+     */
+    _getActiveWheelItem(): DockWheelItem {
+        for (let wheelType in this.wheelItems) {
+            let wheelItem = this.wheelItems[wheelType];
+            if (wheelItem.active)
+                return wheelItem;
+        }
+        return this.wheelItems[WheelTypes.fill];
+    }
+
+    _handleDockRequest(wheelItem: DockWheelItem, dialog: Dialog) {
+        wheelItem.active = false;
+        wheelItem.element.classList.remove(wheelItem.hoverIconClass);
+
+        if (!this.activeNode)
+            return;
+        if (wheelItem.id === WheelTypes.left) {
+            this.dockManager.dockDialogLeft(this.activeNode, dialog);
+        } else if (wheelItem.id === WheelTypes.right) {
+            this.dockManager.dockDialogRight(this.activeNode, dialog);
+        } else if (wheelItem.id === WheelTypes.top) {
+            this.dockManager.dockDialogUp(this.activeNode, dialog);
+        } else if (wheelItem.id === WheelTypes.down) {
+            this.dockManager.dockDialogDown(this.activeNode, dialog);
+        } else if (wheelItem.id === WheelTypes.fill) {
+            this.dockManager.dockDialogFill(this.activeNode, dialog);
+        } else if (wheelItem.id === WheelTypes["left-s"]) {
+            this.dockManager.dockDialogLeft(this.dockManager.context.model.rootNode, dialog);
+        } else if (wheelItem.id === WheelTypes["right-s"]) {
+            this.dockManager.dockDialogRight(this.dockManager.context.model.rootNode, dialog);
+        } else if (wheelItem.id === WheelTypes["top-s"]) {
+            this.dockManager.dockDialogUp(this.dockManager.context.model.rootNode, dialog);
+        } else if (wheelItem.id === WheelTypes["down-s"]) {
+            this.dockManager.dockDialogDown(this.dockManager.context.model.rootNode, dialog);
+        }
+    }
+}

package/src/DockWheelItem.ts

@@ -0,0 +1,41 @@
+import { EventHandler } from "./EventHandler.js";
+import { DockWheel } from "./DockWheel.js";
+import { WheelTypes } from "./enums/WheelTypes.js";
+
+export class DockWheelItem {
+
+    wheel: DockWheel;
+    id: WheelTypes;
+    element: HTMLDivElement;
+    hoverIconClass: string;
+    mouseOverHandler: EventHandler;
+    mouseOutHandler: EventHandler;
+    active: boolean;
+
+    constructor(wheel: DockWheel, id: WheelTypes) {
+        this.wheel = wheel;
+        this.id = id;
+        let wheelType = id.replace('-s', '');
+        this.element = document.createElement('div');
+        this.element.classList.add('dock-wheel-item');
+        this.element.classList.add('disable-selection');
+        this.element.classList.add('dock-wheel-' + wheelType);
+        this.element.classList.add('dock-wheel-' + wheelType + '-icon');
+        this.hoverIconClass = 'dock-wheel-' + wheelType + '-icon-hover';
+        this.mouseOverHandler = new EventHandler(this.element, 'pointerover', this.onMouseMoved.bind(this));
+        this.mouseOutHandler = new EventHandler(this.element, 'pointerout', this.onMouseOut.bind(this));
+        this.active = false;    // Becomes active when the mouse is hovered over it
+    }
+
+    onMouseMoved() {
+        this.active = true;
+        this.element.classList.add(this.hoverIconClass);
+        this.wheel.onMouseOver(this);
+    }
+
+    onMouseOut() {
+        this.active = false;
+        this.element.classList.remove(this.hoverIconClass);
+        this.wheel.onMouseOut();
+    }
+}

package/src/DocumentManagerContainer.ts

@@ -0,0 +1,39 @@
+import { FillDockContainer } from "./FillDockContainer.js";
+import { TabHost } from "./TabHost.js";
+import { DocumentTabPage } from "./DocumentTabPage.js";
+import { DockManager } from "./DockManager.js";
+import { TabHostDirection } from "./enums/TabHostDirection.js";
+import { IState } from "./interfaces/IState.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+
+/**
+ * The document manager is then central area of the dock layout hierarchy.
+ * This is where more important panels are placed (e.g. the text editor in an IDE,
+ * 3D view in a modelling package etc
+ */
+
+export class DocumentManagerContainer extends FillDockContainer {
+
+    constructor(dockManager: DockManager) {
+        super(dockManager, TabHostDirection.TOP);
+        
+        this.minimumAllowedChildNodes = 0;
+        this.element.classList.add('document-manager');
+        this.tabHost.createTabPage = this._createDocumentTabPage;
+        this.tabHost.displayCloseButton = true;
+    }
+
+    private _createDocumentTabPage(tabHost: TabHost, container: IDockContainer) {
+        return new DocumentTabPage(tabHost, container);
+    }
+
+    saveState(state: IState) {
+        super.saveState(state);
+        state.documentManager = true;
+    }
+
+    /** Returns the selected document tab */
+    selectedTab() {
+        return this.tabHost.activeTab;
+    }
+}

package/src/DocumentTabPage.ts

@@ -0,0 +1,35 @@
+import { TabHost } from "./TabHost.js";
+import { TabPage } from "./TabPage.js";
+import { Utils } from "./Utils.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { PanelContainer } from "./PanelContainer.js";
+
+/**
+ * Specialized tab page that doesn't display the panel's frame when docked in a tab page
+ */
+export class DocumentTabPage extends TabPage {
+
+    constructor(host: TabHost, container: IDockContainer) {
+        super(host, container);
+
+        // If the container is a panel, extract the content element and set it as the tab's content
+        if (this.container.containerType === 'panel') {
+            this.panel = container as PanelContainer;
+            this.containerElement = this.panel.elementContentWrapper;
+
+            // detach the container element from the panel's frame.
+            // It will be reattached when this tab page is destroyed
+            // This enables the panel's frame (title bar etc) to be hidden
+            // inside the tab page
+            Utils.removeNode(this.containerElement);
+        }
+    }
+
+    destroy() {
+        super.destroy();
+
+        // Restore the panel content element back into the panel frame
+        //Utils.removeNode(this.containerElement);
+        this.panel.elementContentHost.appendChild(this.containerElement);
+    }
+}

package/src/DraggableContainer.ts

@@ -0,0 +1,177 @@
+import { Dialog } from "./Dialog.js";
+import { DockManager } from "./DockManager.js";
+import { EventHandler } from "./EventHandler.js";
+import { Point } from "./Point.js";
+import { Utils } from "./Utils.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { ContainerType } from "./ContainerType.js";
+import { IState } from "./interfaces/IState.js";
+import { PanelContainer } from "./PanelContainer.js";
+
+export class DraggableContainer implements IDockContainer {
+
+    dialog: Dialog;
+    delegate: PanelContainer;
+    containerElement: HTMLElement;
+    dockManager: DockManager;
+    topLevelElement: HTMLElement;
+    containerType: ContainerType;
+    mouseDownHandler: EventHandler;
+    touchDownHandler: EventHandler;
+    minimumAllowedChildNodes: number;
+    previousMousePosition: { x: any; y: any; };
+    mouseMoveHandler: EventHandler;
+    mouseUpHandler: EventHandler;
+    private iframeEventHandlers: EventHandler[];
+
+    constructor(dialog: Dialog, delegate: PanelContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
+        this.dialog = dialog;
+        this.delegate = delegate;
+        this.containerElement = delegate.containerElement;
+        this.dockManager = delegate.dockManager;
+        this.topLevelElement = topLevelElement;
+        this.containerType = delegate.containerType;
+        this.mouseDownHandler = new EventHandler(dragHandle, 'mousedown', this.onMouseDown.bind(this));
+        this.touchDownHandler = new EventHandler(dragHandle, 'touchstart', this.onMouseDown.bind(this));
+        this.topLevelElement.style.left = topLevelElement.offsetLeft + 'px';
+        this.topLevelElement.style.top = topLevelElement.offsetTop + 'px';
+        this.minimumAllowedChildNodes = delegate.minimumAllowedChildNodes;
+        this.iframeEventHandlers = [];
+    }
+
+    destroy() {
+        this.removeDecorator();
+        this.delegate.destroy();
+    }
+
+    saveState(state: IState) {
+        this.delegate.saveState(state);
+    }
+
+    loadState(state: IState) {
+        this.delegate.loadState(state);
+    }
+
+    setActiveChild(/*child*/) {
+    }
+
+    get width(): number {
+        return this.delegate.width;
+    }
+
+    get height(): number {
+        return this.delegate.height;
+    }
+
+    get name() {
+        return this.delegate.name;
+    }
+    set name(value) {
+        if (value)
+            this.delegate.name = value;
+    }
+
+    resize(width: number, height: number) {
+        this.delegate.resize(width, height);
+    }
+
+    performLayout(children: IDockContainer[]) {
+        this.delegate.performLayout(children, false);
+    }
+
+    removeDecorator() {
+        if (this.mouseDownHandler) {
+            this.mouseDownHandler.cancel();
+            delete this.mouseDownHandler;
+        }
+        if (this.touchDownHandler) {
+            this.touchDownHandler.cancel();
+            delete this.touchDownHandler;
+        }
+    }
+
+    onMouseDown(event: PointerEvent) {
+        if (event.button == 2)
+            return;
+        if (event.preventDefault)
+            event.preventDefault();
+
+        this._startDragging(event);
+        this.previousMousePosition = { x: event.clientX, y: event.clientY };
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
+            delete this.mouseMoveHandler;
+        }
+        if (this.mouseUpHandler) {
+            this.mouseUpHandler.cancel();
+            delete this.mouseUpHandler;
+        }
+
+        this.mouseMoveHandler = new EventHandler(window, 'pointermove', this.onMouseMove.bind(this));
+        this.mouseUpHandler = new EventHandler(window, 'pointerup', this.onMouseUp.bind(this));
+
+        if (this.dockManager.iframes) {
+            for (let f of this.dockManager.iframes) {
+                let mmi = this.onMouseMovedIframe.bind(this);
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'pointermove', (e) => mmi(e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'pointerup', this.onMouseUp.bind(this)));
+            }
+        }
+    }
+
+    onMouseUp(event) {
+        this._stopDragging(event);
+        this.mouseMoveHandler.cancel();
+        delete this.mouseMoveHandler;
+        this.mouseUpHandler.cancel();
+        delete this.mouseUpHandler;
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
+    }
+
+    _startDragging(event: { clientX: number, clientY: number }) {
+        this.containerElement.classList.add("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.add("draggable-dragging-active");
+        if (this.dialog.eventListener)
+            this.dialog.eventListener._onDialogDragStarted(this.dialog, event);
+        Utils.disableGlobalTextSelection(this.dockManager.config.dialogRootElement);
+    }
+
+    _stopDragging(event) {
+        this.containerElement.classList.remove("draggable-dragging-active");
+        this.delegate.elementContentContainer.classList.remove("draggable-dragging-active");
+        if (this.dialog.eventListener)
+            this.dialog.eventListener._onDialogDragEnded(this.dialog, event);
+        Utils.enableGlobalTextSelection(this.dockManager.config.dialogRootElement);
+    }
+
+    onMouseMovedIframe(e: PointerEvent, iframe: HTMLIFrameElement) {
+        let posIf = iframe.getBoundingClientRect();
+        this.onMouseMove(e, { x: posIf.x, y: posIf.y });
+    }
+
+    onMouseMove(event: PointerEvent, iframeOffset?: { x: number, y: number }) {
+        if (event.preventDefault)
+            event.preventDefault();
+
+        let currentMousePosition = new Point(event.clientX, event.clientY);
+        if (iframeOffset)
+            currentMousePosition = new Point(event.clientX + iframeOffset.x, event.clientY + iframeOffset.y);
+
+        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, false, false);
+        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, false, false);
+        this._performDrag(dx, dy);
+        this.previousMousePosition = currentMousePosition;
+    }
+
+    _performDrag(dx: number, dy: number) {
+        let left = dx + Utils.getPixels(this.topLevelElement.style.left);
+        let top = dy + Utils.getPixels(this.topLevelElement.style.top);
+        this.topLevelElement.style.left = left + 'px';
+        this.topLevelElement.style.top = top + 'px';
+
+        this.dialog.panel.setDialogPosition(left, top);
+    }
+}

package/src/EventHandler.ts

@@ -0,0 +1,17 @@
+export class EventHandler {
+    target: EventListenerOrEventListenerObject;
+    eventName: string;
+    source: Element | Window;
+
+    constructor(source: Element | Window, eventName: string, target: EventListenerOrEventListenerObject, useCapture?: boolean | AddEventListenerOptions) {
+        this.target = target;
+        this.eventName = eventName;
+        this.source = source;
+
+        this.source.addEventListener(eventName, this.target, useCapture);
+    }
+
+    cancel() {
+        this.source.removeEventListener(this.eventName, this.target);
+    }
+}