rc-dock - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

es/DockTabs.js

@@ -47,5 +47,10 @@ import React from "react";
         this.onDragStart = (e) => {
-            let panel = findParentPanel(this._ref);
+            let panel = this.data.parent;
+            if (panel.parent.mode === 'float' && panel.tabs.length === 1) {
+                // when it's the only tab in a float panel, skip this drag, let parent tab bar handle it
+                return;
+            }
+            let panelElement = findParentPanel(this._ref);
             let tabGroup = this.context.getGroup(this.data.group);
-            let [panelWidth, panelHeight] = getFloatPanelSize(panel, tabGroup);
+            let [panelWidth, panelHeight] = getFloatPanelSize(panelElement, tabGroup);
             e.setData({ tab: this.data, panelSize: [panelWidth, panelHeight] }, this.context.getDockId());
@@ -52,0 +57,0 @@ e.startDrag(this._ref.parentElement, this._ref.parentElement);

es/dragdrop/DragDropDiv.d.ts

@@ -52,3 +52,3 @@ import React from "react";
     onGestureEnd: (e?: TouchEvent) => void;
-    onKeyDown: (e?: KeyboardEvent) => void;
+    onKeyDown: (e: KeyboardEvent) => void;
     cancel(): void;
@@ -55,0 +55,0 @@ removeListeners(): void;

es/dragdrop/DragDropDiv.js

@@ -73,2 +73,6 @@ var __rest = (this && this.__rest) || function (s, e) {
             if (this.waitingMove) {
+                if (DragManager.isDragging()) {
+                    this.onDragEnd();
+                    return;
+                }
                 if (!this.checkFirstMove(e)) {
@@ -90,2 +94,6 @@ return;
             if (this.waitingMove) {
+                if (DragManager.isDragging()) {
+                    this.onDragEnd();
+                    return;
+                }
                 if (!this.checkFirstMove(e)) {
@@ -112,6 +120,4 @@ return;
             if (!this.waitingMove) {
-                if (e) {
-                    // e=null means drag is canceled
-                    state._onDragEnd();
-                }
+                // e=null means drag is canceled
+                state._onDragEnd(e == null);
                 if (onDragEndT) {
@@ -156,3 +162,3 @@ onDragEndT(state);
     onDragStart(event) {
-        if (!DragManager.checkPointerDownEvent(event)) {
+        if (DragManager.isDragging()) {
             // same pointer event shouldn't trigger 2 drag start
@@ -210,3 +216,2 @@ return;
         }
-        this.ownerDocument.body.classList.add('dock-dragging');
         state._onMove();
@@ -220,3 +225,2 @@ this.ownerDocument.addEventListener('keydown', this.onKeyDown);
         this.ownerDocument.addEventListener('keydown', this.onKeyDown);
-        this.ownerDocument.body.classList.add('dock-dragging');
         this.gesturing = true;
@@ -226,3 +230,3 @@ this.waitingMove = true;
     onGestureStart(event) {
-        if (!DragManager.checkPointerDownEvent(event)) {
+        if (!DragManager.isDragging()) {
             // same pointer event shouldn't trigger 2 drag start
@@ -271,3 +275,2 @@ return;
         }
-        this.ownerDocument.body.classList.remove('dock-dragging');
         this.ownerDocument.removeEventListener('keydown', this.onKeyDown);
@@ -280,3 +283,2 @@ this.listening = false;
         this.waitingMove = false;
-        DragManager.destroyDraggingElement(state);
     }
@@ -283,0 +285,0 @@ render() {

es/dragdrop/DragManager.d.ts

@@ -38,3 +38,3 @@ export declare type DragType = 'left' | 'right' | 'touch';
     _onMove(): void;
-    _onDragEnd(): void;
+    _onDragEnd(canceled?: boolean): void;
 }
@@ -53,3 +53,2 @@ export declare type DragHandler = (state: DragState) => void;
 export declare function removeDragStateListener(callback: (scope: any) => void): void;
-export declare function checkPointerDownEvent(e: any): boolean;
 export {};

es/dragdrop/DragManager.js

@@ -51,2 +51,3 @@ export class DragState {
         createDraggingElement(this, refElement, draggingHtml);
+        this.component.ownerDocument.body.classList.add('dock-dragging');
     }
@@ -98,13 +99,15 @@ setData(data, scope) {
     }
-    _onDragEnd() {
-        if (_droppingHandlers && _droppingHandlers.onDropT) {
+    _onDragEnd(canceled = false) {
+        if (_droppingHandlers && _droppingHandlers.onDropT && !canceled) {
             _droppingHandlers.onDropT(this);
+            if (this.component.dragType === 'right') {
+                // prevent the next menu event if drop handler is called on right mouse button
+                this.component.ownerDocument.addEventListener('contextmenu', preventDefault, true);
+                setTimeout(() => {
+                    this.component.ownerDocument.removeEventListener('contextmenu', preventDefault, true);
+                }, 0);
+            }
         }
-        if (this.component.dragType === 'right') {
-            // prevent the next menu event if drop handler is called on right mouse button
-            this.component.ownerDocument.addEventListener('contextmenu', preventDefault, true);
-            setTimeout(() => {
-                this.component.ownerDocument.removeEventListener('contextmenu', preventDefault, true);
-            }, 0);
-        }
+        destroyDraggingElement(this);
+        this.component.ownerDocument.body.classList.remove('dock-dragging');
     }
@@ -235,15 +238,2 @@ }
 }
-let _lastPointerDownEvent;
-export function checkPointerDownEvent(e) {
-    if (e instanceof MouseEvent && e.button !== 0 && e.button !== 2) {
-        // only allows left right button drag
-        return false;
-    }
-    if (e !== _lastPointerDownEvent) {
-        // same event can't trigger drag twice
-        _lastPointerDownEvent = e;
-        return true;
-    }
-    return false;
-}
 // work around for drag scroll issue on IOS
@@ -250,0 +240,0 @@ if (typeof window !== 'undefined' && window.navigator && window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform)) {

HISTORY.md

 # History
 ----
 
+## 3.2.0 / 2021-10-03
+- in a float panel with single tab, dragging the tab should work the same way as dragging the panel header
+
 ## 3.1.0 / 2021-09-06
@@ -5,0 +8,0 @@ - add dark theme

lib/DockTabs.js

@@ -72,5 +72,10 @@ "use strict";
         this.onDragStart = (e) => {
-            let panel = findParentPanel(this._ref);
+            let panel = this.data.parent;
+            if (panel.parent.mode === 'float' && panel.tabs.length === 1) {
+                // when it's the only tab in a float panel, skip this drag, let parent tab bar handle it
+                return;
+            }
+            let panelElement = findParentPanel(this._ref);
             let tabGroup = this.context.getGroup(this.data.group);
-            let [panelWidth, panelHeight] = Algorithm_1.getFloatPanelSize(panel, tabGroup);
+            let [panelWidth, panelHeight] = Algorithm_1.getFloatPanelSize(panelElement, tabGroup);
             e.setData({ tab: this.data, panelSize: [panelWidth, panelHeight] }, this.context.getDockId());
@@ -77,0 +82,0 @@ e.startDrag(this._ref.parentElement, this._ref.parentElement);

lib/dragdrop/DragDropDiv.d.ts

@@ -52,3 +52,3 @@ import React from "react";
     onGestureEnd: (e?: TouchEvent) => void;
-    onKeyDown: (e?: KeyboardEvent) => void;
+    onKeyDown: (e: KeyboardEvent) => void;
     cancel(): void;
@@ -55,0 +55,0 @@ removeListeners(): void;

lib/dragdrop/DragDropDiv.js

@@ -98,2 +98,6 @@ "use strict";
             if (this.waitingMove) {
+                if (DragManager.isDragging()) {
+                    this.onDragEnd();
+                    return;
+                }
                 if (!this.checkFirstMove(e)) {
@@ -115,2 +119,6 @@ return;
             if (this.waitingMove) {
+                if (DragManager.isDragging()) {
+                    this.onDragEnd();
+                    return;
+                }
                 if (!this.checkFirstMove(e)) {
@@ -137,6 +145,4 @@ return;
             if (!this.waitingMove) {
-                if (e) {
-                    // e=null means drag is canceled
-                    state._onDragEnd();
-                }
+                // e=null means drag is canceled
+                state._onDragEnd(e == null);
                 if (onDragEndT) {
@@ -181,3 +187,3 @@ onDragEndT(state);
     onDragStart(event) {
-        if (!DragManager.checkPointerDownEvent(event)) {
+        if (DragManager.isDragging()) {
             // same pointer event shouldn't trigger 2 drag start
@@ -235,3 +241,2 @@ return;
         }
-        this.ownerDocument.body.classList.add('dock-dragging');
         state._onMove();
@@ -245,3 +250,2 @@ this.ownerDocument.addEventListener('keydown', this.onKeyDown);
         this.ownerDocument.addEventListener('keydown', this.onKeyDown);
-        this.ownerDocument.body.classList.add('dock-dragging');
         this.gesturing = true;
@@ -251,3 +255,3 @@ this.waitingMove = true;
     onGestureStart(event) {
-        if (!DragManager.checkPointerDownEvent(event)) {
+        if (!DragManager.isDragging()) {
             // same pointer event shouldn't trigger 2 drag start
@@ -296,3 +300,2 @@ return;
         }
-        this.ownerDocument.body.classList.remove('dock-dragging');
         this.ownerDocument.removeEventListener('keydown', this.onKeyDown);
@@ -305,3 +308,2 @@ this.listening = false;
         this.waitingMove = false;
-        DragManager.destroyDraggingElement(state);
     }
@@ -308,0 +310,0 @@ render() {

lib/dragdrop/DragManager.d.ts

@@ -38,3 +38,3 @@ export declare type DragType = 'left' | 'right' | 'touch';
     _onMove(): void;
-    _onDragEnd(): void;
+    _onDragEnd(canceled?: boolean): void;
 }
@@ -53,3 +53,2 @@ export declare type DragHandler = (state: DragState) => void;
 export declare function removeDragStateListener(callback: (scope: any) => void): void;
-export declare function checkPointerDownEvent(e: any): boolean;
 export {};

lib/dragdrop/DragManager.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkPointerDownEvent = exports.removeDragStateListener = exports.addDragStateListener = exports.destroyDraggingElement = exports.removeHandlers = exports.addHandlers = exports.isDragging = exports.DragState = void 0;
+exports.removeDragStateListener = exports.addDragStateListener = exports.destroyDraggingElement = exports.removeHandlers = exports.addHandlers = exports.isDragging = exports.DragState = void 0;
 class DragState {
@@ -54,2 +54,3 @@ constructor(event, component, init = false) {
         createDraggingElement(this, refElement, draggingHtml);
+        this.component.ownerDocument.body.classList.add('dock-dragging');
     }
@@ -101,13 +102,15 @@ setData(data, scope) {
     }
-    _onDragEnd() {
-        if (_droppingHandlers && _droppingHandlers.onDropT) {
+    _onDragEnd(canceled = false) {
+        if (_droppingHandlers && _droppingHandlers.onDropT && !canceled) {
             _droppingHandlers.onDropT(this);
+            if (this.component.dragType === 'right') {
+                // prevent the next menu event if drop handler is called on right mouse button
+                this.component.ownerDocument.addEventListener('contextmenu', preventDefault, true);
+                setTimeout(() => {
+                    this.component.ownerDocument.removeEventListener('contextmenu', preventDefault, true);
+                }, 0);
+            }
         }
-        if (this.component.dragType === 'right') {
-            // prevent the next menu event if drop handler is called on right mouse button
-            this.component.ownerDocument.addEventListener('contextmenu', preventDefault, true);
-            setTimeout(() => {
-                this.component.ownerDocument.removeEventListener('contextmenu', preventDefault, true);
-            }, 0);
-        }
+        destroyDraggingElement(this);
+        this.component.ownerDocument.body.classList.remove('dock-dragging');
     }
@@ -245,16 +248,2 @@ }
 exports.removeDragStateListener = removeDragStateListener;
-let _lastPointerDownEvent;
-function checkPointerDownEvent(e) {
-    if (e instanceof MouseEvent && e.button !== 0 && e.button !== 2) {
-        // only allows left right button drag
-        return false;
-    }
-    if (e !== _lastPointerDownEvent) {
-        // same event can't trigger drag twice
-        _lastPointerDownEvent = e;
-        return true;
-    }
-    return false;
-}
-exports.checkPointerDownEvent = checkPointerDownEvent;
 // work around for drag scroll issue on IOS
@@ -261,0 +250,0 @@ if (typeof window !== 'undefined' && window.navigator && window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform)) {

package.json

 {
   "name": "rc-dock",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "dock layout for react component",
@@ -5,0 +5,0 @@ "repository": {

src/dragdrop/DragManager.ts

@@ -69,2 +69,3 @@ export type DragType = 'left' | 'right' | 'touch';
     createDraggingElement(this, refElement, draggingHtml);
+    this.component.ownerDocument.body.classList.add('dock-dragging');
   }
@@ -126,13 +127,17 @@
 
-  _onDragEnd() {
-    if (_droppingHandlers && _droppingHandlers.onDropT) {
+  _onDragEnd(canceled: boolean = false) {
+    if (_droppingHandlers && _droppingHandlers.onDropT && !canceled) {
       _droppingHandlers.onDropT(this);
+
+      if (this.component.dragType === 'right') {
+        // prevent the next menu event if drop handler is called on right mouse button
+        this.component.ownerDocument.addEventListener('contextmenu', preventDefault, true);
+        setTimeout(() => {
+          this.component.ownerDocument.removeEventListener('contextmenu', preventDefault, true);
+        }, 0);
+      }
     }
-    if (this.component.dragType === 'right') {
-      // prevent the next menu event if drop handler is called on right mouse button
-      this.component.ownerDocument.addEventListener('contextmenu', preventDefault, true);
-      setTimeout(() => {
-        this.component.ownerDocument.removeEventListener('contextmenu', preventDefault, true);
-      }, 0);
-    }
+
+    destroyDraggingElement(this);
+    this.component.ownerDocument.body.classList.remove('dock-dragging');
   }
@@ -273,3 +278,2 @@ }
 
-
   _draggingState = null;
@@ -297,17 +301,2 @@ setDroppingHandler(null, e);
 
-let _lastPointerDownEvent: any;
-
-export function checkPointerDownEvent(e: any) {
-  if (e instanceof MouseEvent && e.button !== 0 && e.button !== 2) {
-    // only allows left right button drag
-    return false;
-  }
-  if (e !== _lastPointerDownEvent) {
-    // same event can't trigger drag twice
-    _lastPointerDownEvent = e;
-    return true;
-  }
-  return false;
-}
-
 // work around for drag scroll issue on IOS
@@ -314,0 +303,0 @@ if (typeof window !== 'undefined' && window.navigator && window.navigator.platform && /iP(ad|hone|od)/.test(window.navigator.platform)) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

560647

increased by3.92%

Number of package files

134

increased by3.08%

Lines of code

14975

increased by2.01%

No dependency changes