v6 mouse events and React

demo/float.html

@@ -24,6 +24,7 @@ <h1>Float grid demo</h1>
   <script type="text/javascript">
     let grid = GridStack.init({
       float: true, 
+      // disableResize: true, // TEST no resizing, but dragging
       resizable: { handles: 'all'} // do all sides for testing
     });
     addEvents(grid);

src/dd-gridstack.ts

@@ -444,9 +444,11 @@ GridStack.setupDragIn = function(this: GridStack, _dragIn?: string, _dragInOptio
 /** @internal prepares the element for drag&drop **/
 GridStack.prototype._prepareDragDropByNode = function(this: GridStack, node: GridStackNode): GridStack {
   let el = node.el;
+  const noMove = node.noMove || this.opts.disableDrag;
+  const noResize = node.noResize || this.opts.disableResize;
 
   // check for disabled grid first
-  if (this.opts.staticGrid || ((node.noMove || this.opts.disableDrag) && (node.noResize || this.opts.disableResize))) {
+  if (this.opts.staticGrid || (noMove && noResize)) {
     if (node._initDD) {
       this._removeDD(el); // nukes everything instead of just disable, will add some styles back next
       delete node._initDD;
@@ -537,20 +539,8 @@ GridStack.prototype._prepareDragDropByNode = function(this: GridStack, node: Gri
   }
 
   // finally fine tune move vs resize by disabling any part...
-  if (node.noMove || this.opts.disableDrag) {
-    dd.draggable(el, 'disable');
-    el.classList.add('ui-draggable-disabled');
-  } else {
-    dd.draggable(el, 'enable');
-    el.classList.remove('ui-draggable-disabled');
-  }
-  if (node.noResize || this.opts.disableResize) {
-    dd.resizable(el, 'disable');
-    el.classList.add('ui-resizable-disabled');
-  } else {
-    dd.resizable(el, 'enable');
-    el.classList.remove('ui-resizable-disabled');
-  }
+  dd.draggable(el, noMove ? 'disable' : 'enable')
+    .resizable(el, noResize ? 'disable' : 'enable');
 
   return this;
 }

src/dd-manager.ts

@@ -5,6 +5,7 @@
 
 import { DDDraggable } from './dd-draggable';
 import { DDDroppable } from './dd-droppable';
+import { DDResizable } from './dd-resizable';
 
 /**
  * globals that are shared across Drag & Drop instances
@@ -18,4 +19,8 @@ export class DDManager {
 
   /** item we are currently over as drop target */
   public static dropElement: DDDroppable;
+
+  /** current item we're over for resizing purpose (ignore nested grid resize handles) */
+  public static overResizeElement: DDResizable;
+
 }

src/dd-resizable.ts

@@ -7,6 +7,9 @@ import { DDResizableHandle } from './dd-resizable-handle';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { Utils } from './utils';
 import { DDUIData, Rect, Size } from './types';
+import { DDManager } from './dd-manager';
+
+// import { GridItemHTMLElement } from './types'; let count = 0; // TEST
 
 // TODO: merge with DDDragOpt
 export interface DDResizableOpt {
@@ -72,12 +75,14 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     super.enable();
     this.el.classList.add('ui-resizable');
     this.el.classList.remove('ui-resizable-disabled');
+    this._setupAutoHide(this.option.autoHide);
   }
 
   public disable(): void {
     super.disable();
     this.el.classList.add('ui-resizable-disabled');
     this.el.classList.remove('ui-resizable');
+    this._setupAutoHide(false);
   }
 
   public destroy(): void {
@@ -106,7 +111,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   protected _setupAutoHide(auto: boolean): DDResizable {
     if (auto) {
       this.el.classList.add('ui-resizable-autohide');
-      // use mouseover/mouseout instead of mouseenter/mouseleave to get better performance;
+      // use mouseover and not mouseenter to get better performance and track for nested cases
       this.el.addEventListener('mouseover', this._mouseOver);
       this.el.addEventListener('mouseout', this._mouseOut);
     } else {
@@ -119,14 +124,21 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   protected _mouseOver(e: Event) {
+    // console.log(`${count++} pre-enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
+    // already over a child, ignore. Ideally we just call e.stopPropagation() but see https://github.com/gridstack/gridstack.js/issues/2018
+    if (DDManager.overResizeElement || DDManager.dragElement) return;
+    DDManager.overResizeElement = this;
+    // console.log(`${count++} enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
     this.el.classList.remove('ui-resizable-autohide');
-    e.stopPropagation();
   }
 
   /** @internal */
   protected _mouseOut(e: Event) {
+    // console.log(`${count++} pre-leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
+    if (DDManager.overResizeElement !== this) return;
+    delete DDManager.overResizeElement;
+    // console.log(`${count++} leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
     this.el.classList.add('ui-resizable-autohide');
-    e.stopPropagation();
   }
 
   /** @internal */