dock-spawn-ts - npm Package Compare versions

Comparing version 2.37.0 to 2.38.0

lib/js/DockConfig.d.ts

@@ -5,2 +5,3 @@ export declare class DockConfig {
     dialogRootElement: HTMLElement;
+    moveOnlyWithinDockConatiner?: boolean;
 }

lib/js/DockConfig.js

@@ -5,4 +5,5 @@ export class DockConfig {
         this.dialogRootElement = document.body;
+        this.moveOnlyWithinDockConatiner = false;
     }
 }
 //# sourceMappingURL=DockConfig.js.map

lib/js/DockManager.d.ts

@@ -40,4 +40,6 @@ import { DockWheel } from "./DockWheel.js";
     onKeyPress(e: KeyboardEvent): void;
-    checkXBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point): number;
-    checkYBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point): number;
+    checkXBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeWest: boolean, resizeEast: boolean): number;
+    checkXBoundsWithinDockContainer(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeWest: boolean, resizeEast: boolean): number;
+    checkYBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeNorth: boolean, resizeSouth: boolean): number;
+    checkYBoundsWithinDockContainer(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeNorth: boolean, resizeSouth: boolean): number;
     rebuildLayout(node: DockNode): void;
@@ -44,0 +46,0 @@ invalidate(): void;

lib/js/DockManager.js

@@ -62,3 +62,5 @@ import { DockWheel } from "./DockWheel.js";
     }
-    checkXBounds(container, currentMousePosition, previousMousePosition) {
+    checkXBounds(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast) {
+        if (this._config.moveOnlyWithinDockConatiner)
+            return this.checkXBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast);
         let dx = Math.floor(currentMousePosition.x - previousMousePosition.x);
@@ -83,3 +85,23 @@ let leftBounds = container.offsetLeft + container.offsetWidth + dx < 40; // || (container.offsetLeft + container.offsetWidth + dx - 40 ) < 0;
     }
-    checkYBounds(container, currentMousePosition, previousMousePosition) {
+    checkXBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast) {
+        let dx = currentMousePosition.x - previousMousePosition.x;
+        let bbOuter = this.element.getBoundingClientRect();
+        let bbInner = container.getBoundingClientRect();
+        let leftBounds = dx < 0 && bbInner.left + dx < bbOuter.left && !resizeEast;
+        let rightBounds = dx > 0 && bbInner.right + dx > bbOuter.right && !resizeWest;
+        if (leftBounds) {
+            currentMousePosition.x -= dx;
+            dx = bbOuter.left - bbInner.left;
+            currentMousePosition.x -= dx;
+        }
+        else if (rightBounds) {
+            currentMousePosition.x -= dx;
+            dx = bbOuter.right - bbInner.right;
+            currentMousePosition.x -= dx;
+        }
+        return dx;
+    }
+    checkYBounds(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth) {
+        if (this._config.moveOnlyWithinDockConatiner)
+            return this.checkYBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth);
         let dy = Math.floor(currentMousePosition.y - previousMousePosition.y);
@@ -101,2 +123,20 @@ let topBounds = container.offsetTop + dy < 0;
     }
+    checkYBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth) {
+        let dy = currentMousePosition.y - previousMousePosition.y;
+        let bbOuter = this.element.getBoundingClientRect();
+        let bbInner = container.getBoundingClientRect();
+        let topBounds = dy < 0 && bbInner.top + dy < bbOuter.top && !resizeSouth;
+        let bottomBounds = dy > 0 && bbInner.bottom + dy > bbOuter.bottom && !resizeNorth;
+        if (topBounds) {
+            currentMousePosition.y -= dy;
+            dy = bbOuter.top - bbInner.top;
+            currentMousePosition.y -= dy;
+        }
+        else if (bottomBounds) {
+            currentMousePosition.y -= dy;
+            dy = bbOuter.bottom - bbInner.bottom;
+            currentMousePosition.y -= dy;
+        }
+        return dy;
+    }
     rebuildLayout(node) {
@@ -103,0 +143,0 @@ node.children.forEach((child) => {

lib/js/DraggableContainer.d.ts

@@ -38,3 +38,6 @@ import { Dialog } from "./Dialog.js";
     onMouseUp(event: any): void;
-    _startDragging(event: any): void;
+    _startDragging(event: {
+        clientX: number;
+        clientY: number;
+    }): void;
     _stopDragging(event: any): void;
@@ -41,0 +44,0 @@ onMouseMove(event: TouchEvent | MouseEvent): void;

lib/js/DraggableContainer.js

@@ -104,2 +104,3 @@ import { EventHandler } from "./EventHandler.js";
     _startDragging(event) {
+        this.containerElement.classList.add("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -110,2 +111,3 @@ this.dialog.eventListener._onDialogDragStarted(this.dialog, event);
     _stopDragging(event) {
+        this.containerElement.classList.remove("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -145,4 +147,4 @@ this.dialog.eventListener._onDialogDragEnded(this.dialog, event);
         let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
-        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
-        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
+        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);
@@ -149,0 +151,0 @@ this.previousMousePosition = currentMousePosition;

lib/js/PanelContainer.js

@@ -266,4 +266,4 @@ import { Utils } from "./Utils.js";
             if (this.floatingDialog) {
-                this.floatingDialog.hide();
-                this.floatingDialog.remove();
+                //this.floatingDialog.hide();
+                this.floatingDialog.close();
             }
@@ -270,0 +270,0 @@ }

lib/js/ResizableContainer.d.ts

@@ -39,3 +39,3 @@ import { Dialog } from "./Dialog.js";
     removeDecorator(): void;
-    onMouseMoved(handle: any, event: TouchEvent | MouseEvent): void;
+    onMouseMoved(handle: ResizeHandle, event: TouchEvent | MouseEvent): void;
     onMouseDown(handle: any, event: TouchEvent | MouseEvent): void;
@@ -42,0 +42,0 @@ onMouseUp(handle: any): void;

lib/js/ResizableContainer.js

@@ -120,4 +120,4 @@ import { ResizeHandle } from "./ResizeHandle.js";
         let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
-        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
-        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
+        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.west, handle.east);
+        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.north, handle.south);
         this._performDrag(handle, dx, dy);
@@ -124,0 +124,0 @@ this.previousMousePosition = currentMousePosition;

package.json

 {
   "name": "dock-spawn-ts",
-  "version": "2.37.0",
+  "version": "2.38.0",
   "description": "DockSpawn Typescript Version",
@@ -5,0 +5,0 @@ "license": "MIT",

src/DockConfig.ts

@@ -5,2 +5,3 @@ export class DockConfig {
         this.dialogRootElement = document.body;
+        this.moveOnlyWithinDockConatiner = false;
     }
@@ -10,2 +11,3 @@
     dialogRootElement: HTMLElement;
+    moveOnlyWithinDockConatiner?: boolean
 }

src/DockManager.ts

@@ -97,3 +97,6 @@ import { DockWheel } from "./DockWheel.js";
 
-    checkXBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point) {
+    checkXBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeWest: boolean, resizeEast: boolean) {
+        if (this._config.moveOnlyWithinDockConatiner)
+            return this.checkXBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeWest, resizeEast);
+
         let dx = Math.floor(currentMousePosition.x - previousMousePosition.x);
@@ -119,3 +122,25 @@ let leftBounds = container.offsetLeft + container.offsetWidth + dx < 40; // || (container.offsetLeft + container.offsetWidth + dx - 40 ) < 0;
 
-    checkYBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point) {
+    checkXBoundsWithinDockContainer(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeWest: boolean, resizeEast: boolean) {
+        let dx = currentMousePosition.x - previousMousePosition.x;
+        let bbOuter = this.element.getBoundingClientRect();
+        let bbInner = container.getBoundingClientRect();
+        let leftBounds = dx < 0 && bbInner.left + dx < bbOuter.left && !resizeEast;
+        let rightBounds = dx > 0 && bbInner.right + dx > bbOuter.right && !resizeWest;
+
+        if (leftBounds) {
+            currentMousePosition.x -= dx;
+            dx = bbOuter.left - bbInner.left;
+            currentMousePosition.x -= dx;
+        } else if (rightBounds) {
+            currentMousePosition.x -= dx;
+            dx = bbOuter.right - bbInner.right;
+            currentMousePosition.x -= dx;
+        }
+        return dx;
+    }
+
+    checkYBounds(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeNorth: boolean, resizeSouth: boolean) {
+        if (this._config.moveOnlyWithinDockConatiner)
+            return this.checkYBoundsWithinDockContainer(container, currentMousePosition, previousMousePosition, resizeNorth, resizeSouth);
+
         let dy = Math.floor(currentMousePosition.y - previousMousePosition.y);
@@ -137,2 +162,21 @@ let topBounds = container.offsetTop + dy < 0;
 
+    checkYBoundsWithinDockContainer(container: HTMLElement, currentMousePosition: Point, previousMousePosition: Point, resizeNorth: boolean, resizeSouth: boolean) {
+        let dy = currentMousePosition.y - previousMousePosition.y;
+        let bbOuter = this.element.getBoundingClientRect();
+        let bbInner = container.getBoundingClientRect();
+        let topBounds = dy < 0 && bbInner.top + dy < bbOuter.top && !resizeSouth;
+        let bottomBounds = dy > 0 && bbInner.bottom + dy > bbOuter.bottom && !resizeNorth;
+
+        if (topBounds) {
+            currentMousePosition.y -= dy;
+            dy = bbOuter.top - bbInner.top;
+            currentMousePosition.y -= dy;
+        } else if (bottomBounds) {
+            currentMousePosition.y -= dy;
+            dy = bbOuter.bottom - bbInner.bottom;
+            currentMousePosition.y -= dy;
+        }
+        return dy;
+    }
+
     rebuildLayout(node: DockNode) {
@@ -139,0 +183,0 @@ node.children.forEach((child) => {

src/DraggableContainer.ts

@@ -27,3 +27,3 @@ import { Dialog } from "./Dialog.js";
     touchUpHandler: EventHandler;
-
+   
     constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
@@ -141,3 +141,4 @@ this.dialog = dialog;
 
-    _startDragging(event) {
+    _startDragging(event: { clientX: number, clientY: number }) {
+        this.containerElement.classList.add("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -149,2 +150,3 @@ this.dialog.eventListener._onDialogDragStarted(this.dialog, event);
     _stopDragging(event) {
+        this.containerElement.classList.remove("draggable-dragging-active");
         if (this.dialog.eventListener)
@@ -187,4 +189,4 @@ this.dialog.eventListener._onDialogDragEnded(this.dialog, event);
 
-        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
-        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
+        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);
@@ -191,0 +193,0 @@ this.previousMousePosition = currentMousePosition;

src/PanelContainer.ts

@@ -33,5 +33,3 @@ import { DockManager } from "./DockManager.js";
     minimumAllowedChildNodes: number;
-    _floatingDialog?: Dialog;
     isDialog: boolean;
-    _canUndock: boolean;
     eventListeners: any[];
@@ -41,5 +39,2 @@ undockInitiator: UndockInitiator;
     closeButtonClickedHandler: EventHandler;
-    _cachedWidth: number;
-    _cachedHeight: number;
-    _hideCloseButton: boolean;
     mouseDownHandler: EventHandler;
@@ -50,2 +45,8 @@ touchDownHandler: EventHandler;
 
+    _floatingDialog?: Dialog;
+    _canUndock: boolean;
+    _cachedWidth: number;
+    _cachedHeight: number;
+    _hideCloseButton: boolean;
+
     constructor(elementContent: HTMLElement, dockManager: DockManager, title?: string, panelType?: PanelType, hideCloseButton?: boolean) {
@@ -344,4 +345,4 @@ if (!title)
             if (this.floatingDialog) {
-                this.floatingDialog.hide();
-                this.floatingDialog.remove();
+                //this.floatingDialog.hide();
+                this.floatingDialog.close();
             }
@@ -348,0 +349,0 @@ }

src/ResizableContainer.ts

@@ -139,3 +139,3 @@ import { Dialog } from "./Dialog.js";
 
-    onMouseMoved(handle, event: TouchEvent | MouseEvent) {
+    onMouseMoved(handle: ResizeHandle, event: TouchEvent | MouseEvent) {
         let touchOrMouseData: { clientX: number, clientY: number } = null;
@@ -157,4 +157,4 @@ if ((<TouchEvent>event).changedTouches) {
         let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
-        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
-        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition);
+        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.west, handle.east);
+        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.north, handle.south);
         this._performDrag(handle, dx, dy);
@@ -161,0 +161,0 @@ this.previousMousePosition = currentMousePosition;

No alert changes

Improved metrics

Total package byte prevSize

678716

increased by1.33%

Lines of code

9641

increased by1.04%

No dependency changes