Merge pull request #2688 from adumesny/master

adumesny · web-flow · commit ba90fa959d37 · 2024-06-02T10:57:50.000-07:00
'Esc' to cancel drag/resize, 'r' to rotate drag
diff --git a/demo/two.html b/demo/two.html
@@ -18,6 +18,8 @@
 <body>
   <div class="container-fluid">
     <h1>Two grids demo</h1>
+    <p>Two grids, one floating one not, showing drag&drop from sidebar and between grids.
+    <br>New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.</p>
 
     <div class="row">
       <div class="col-md-3">
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -110,6 +110,7 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 ## 10.1.2-dev (TBD)
+* feat: [#2682](https://github.com/gridstack/gridstack.js/pull/2682) You can now press 'Esc' to cancel a move|resize, 'r' to rotate during a drag. added `GridStack.rotate()` as well - Thank you John B. for this feature sponsor.
 * fix: [#2672](https://github.com/gridstack/gridstack.js/pull/2672) dropping into full grid JS error
 * fix: [#2676](https://github.com/gridstack/gridstack.js/issues/2676) handle minW resizing when column count is less
 * fix: [#2677](https://github.com/gridstack/gridstack.js/issues/2677) allow button as handle dragging
diff --git a/doc/README.md b/doc/README.md
@@ -60,6 +60,7 @@ gridstack.js API
   - [`removeAll(removeDOM = true)`](#removeallremovedom--true)
   - [`resizable(el, val)`](#resizableel-val)
   - [`resizeToContent(el: GridItemHTMLElement, useAttrSize = false)`](#resizetocontentel-griditemhtmlelement-useattrsize--false)
+  - [`rotate(els: GridStackElement, relative?: Position)`](#rotateels-gridstackelement-relative-position)
   - [`save(saveContent = true, saveGridOpt = false): GridStackWidget[] | GridStackOptions`](#savesavecontent--true-savegridopt--false-gridstackwidget--gridstackoptions)
   - [`setAnimation(doAnimate)`](#setanimationdoanimate)
   - [`setStatic(staticValue)`](#setstaticstaticvalue)
@@ -583,6 +584,12 @@ Updates widget height to match the content height to avoid v-scrollbar or dead s
 Note: this assumes only 1 child under `resizeToContentParent='.grid-stack-item-content'` (sized to gridItem minus padding) that is at the entire content size wanted.
 - `useAttrSize` set to `true` if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
 
+### `rotate(els: GridStackElement, relative?: Position)`
+rotate (by swapping w & h) the passed in node - called when user press 'r' during dragging
+
+- `els` - widget or selector of objects to modify
+- `relative` - optional pixel coord relative to upper/left corner to rotate around (will keep that cell under cursor)
+
 ### `save(saveContent = true, saveGridOpt = false): GridStackWidget[] | GridStackOptions`
 
 saves the current layout returning a list of widgets for serialization which might include any nested grids.
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
@@ -6,7 +6,7 @@
 import { DDManager } from './dd-manager';
 import { DragTransform, Utils } from './utils';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { GridItemHTMLElement, DDUIData } from './types';
+import { GridItemHTMLElement, DDUIData, GridStackNode, GridStackPosition } from './types';
 import { DDElementHost } from './dd-element';
 import { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';
 
@@ -33,6 +33,10 @@ interface DragOffset {
   offsetTop: number;
 }
 
+interface GridStackNodeRotate extends GridStackNode {
+  _origRotate?: GridStackPosition;
+}
+
 type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
 
 // make sure we are not clicking on known object that handles mouseDown
@@ -53,6 +57,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   protected dragEl: HTMLElement;
   /** @internal true while we are dragging an item around */
   protected dragging: boolean;
+  /** @internal last drag event */
+  protected lastDrag: DragEvent;
   /** @internal */
   protected parentOriginStylePosition: string;
   /** @internal */
@@ -69,7 +75,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     yOffset: 0
   };
 
-  constructor(public el: HTMLElement, public option: DDDraggableOpt = {}) {
+  constructor(public el: GridItemHTMLElement, public option: DDDraggableOpt = {}) {
     super();
 
     // get the element that is actually supposed to be dragged by
@@ -79,6 +85,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     this._mouseDown = this._mouseDown.bind(this);
     this._mouseMove = this._mouseMove.bind(this);
     this._mouseUp = this._mouseUp.bind(this);
+    this._keyEvent = this._keyEvent.bind(this);
     this.enable();
   }
 
@@ -184,6 +191,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   protected _mouseMove(e: DragEvent): boolean {
     // console.log(`${count++} move ${e.x},${e.y}`)
     let s = this.mouseDownEvent;
+    this.lastDrag = e;
 
     if (this.dragging) {
       this._dragFollow(e);
@@ -202,25 +210,25 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
       this.dragging = true;
       DDManager.dragElement = this;
       // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)
-      let grid = (this.el as GridItemHTMLElement).gridstackNode?.grid;
+      let grid = this.el.gridstackNode?.grid;
       if (grid) {
         DDManager.dropElement = (grid.el as DDElementHost).ddElement.ddDroppable;
       } else {
         delete DDManager.dropElement;
       }
       this.helper = this._createHelper(e);
       this._setupHelperContainmentStyle();
-      this.dragTransform = Utils.getValuesFromTransformedElement(
-        this.helperContainment
-      );
+      this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);
       this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
-      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });
-
       this._setupHelperStyle(e);
+
+      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });
       if (this.option.start) {
         this.option.start(ev, this.ui());
       }
       this.triggerEvent('dragstart', ev);
+      // now track keyboard events to cancel or rotate
+      document.addEventListener('keydown', this._keyEvent);
     }
     // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around
     return true;
@@ -236,6 +244,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     }
     if (this.dragging) {
       delete this.dragging;
+      delete (this.el.gridstackNode as GridStackNodeRotate)?._origRotate;
+      document.removeEventListener('keydown', this._keyEvent);
 
       // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)
       if (DDManager.dropElement?.el === this.el.parentElement) {
@@ -267,6 +277,37 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     e.preventDefault();
   }
 
+  /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
+  protected _keyEvent(e: KeyboardEvent): void {
+    const n = this.el.gridstackNode as GridStackNodeRotate;
+    if (!n) return;
+    const grid = n.grid;
+
+    if (e.key === 'Escape') {
+      if (n._origRotate) {
+        n._orig = n._origRotate;
+        delete n._origRotate;
+      }
+      grid.engine.restoreInitial();
+      this._mouseUp(this.mouseDownEvent);
+    } else if (e.key === 'r' || e.key === 'R') {
+      if (n.w === n.h) return;
+      n._origRotate = n._origRotate || {...n._orig}; // store the real orig size in case we Esc after doing rotation
+      delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise)
+      grid.setAnimation(false) // immediate rotate so _getDragOffset() gets the right dom size below
+        .rotate(n.el, {top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft})
+        .setAnimation();
+      n._moving = true;
+      this.dragOffset = this._getDragOffset(this.lastDrag, n.el, this.helperContainment);
+      this.helper.style.width = this.dragOffset.width + 'px';
+      this.helper.style.height = this.dragOffset.height + 'px';
+      function swap(o: unknown, a: string, b: string): void { const tmp = o[a]; o[a] = o[b]; o[b] = tmp; }
+      swap(n._orig, 'w', 'h');
+      delete n._rect;
+      this._mouseMove(this.lastDrag);
+    }
+  }
+
   /** @internal create a clone copy (or user defined method) of the original drag item if set */
   protected _createHelper(event: DragEvent): HTMLElement {
     let helper = this.el;
diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
@@ -4,6 +4,7 @@
  */
 
 import { isTouch, pointerdown, touchend, touchmove, touchstart } from './dd-touch';
+import { GridItemHTMLElement } from './gridstack';
 
 export interface DDResizableHandleOpt {
   start?: (event) => void;
@@ -21,11 +22,12 @@ export class DDResizableHandle {
   /** @internal */
   protected static prefix = 'ui-resizable-';
 
-  constructor(protected host: HTMLElement, protected dir: string, protected option: DDResizableHandleOpt) {
+  constructor(protected host: GridItemHTMLElement, protected dir: string, protected option: DDResizableHandleOpt) {
     // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
     this._mouseDown = this._mouseDown.bind(this);
     this._mouseMove = this._mouseMove.bind(this);
     this._mouseUp = this._mouseUp.bind(this);
+    this._keyEvent = this._keyEvent.bind(this);
 
     this._init();
   }
@@ -84,6 +86,8 @@ export class DDResizableHandle {
       this.moving = true;
       this._triggerEvent('start', this.mouseDownEvent);
       this._triggerEvent('move', e);
+      // now track keyboard events to cancel
+      document.addEventListener('keydown', this._keyEvent);
     }
     e.stopPropagation();
     // e.preventDefault(); passive = true
@@ -93,6 +97,7 @@ export class DDResizableHandle {
   protected _mouseUp(e: MouseEvent): void {
     if (this.moving) {
       this._triggerEvent('stop', e);
+      document.removeEventListener('keydown', this._keyEvent);
     }
     document.removeEventListener('mousemove', this._mouseMove, true);
     document.removeEventListener('mouseup', this._mouseUp, true);
@@ -106,6 +111,16 @@ export class DDResizableHandle {
     e.preventDefault();
   }
 
+  /** @internal call when keys are being pressed - use Esc to cancel */
+  protected _keyEvent(e: KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      this.host.gridstackNode?.grid?.engine.restoreInitial();
+      this._mouseUp(this.mouseDownEvent);
+    }
+  }
+    
+  
+  
   /** @internal */
   protected _triggerEvent(name: string, event: MouseEvent): DDResizableHandle {
     if (this.option[name]) this.option[name](event);
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -10,7 +10,8 @@ import { Utils, HeightData, obsolete, DragTransform } from './utils';
 import {
   gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
   GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions,
-  dragInDefaultOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, GridStackMoveOpts, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler
+  dragInDefaultOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, GridStackMoveOpts, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler,
+  Position
 } from './types';
 
 /*
@@ -224,7 +225,7 @@ export class GridStack {
   public _isTemp?: boolean;
 
   /** @internal create placeholder DIV as needed */
-  public get placeholder(): HTMLElement {
+  public get placeholder(): GridItemHTMLElement {
     if (!this._placeholder) {
       let placeholderChild = document.createElement('div'); // child so padding match item-content
       placeholderChild.className = 'placeholder-content';
@@ -426,7 +427,7 @@ export class GridStack {
     }
 
     // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
-    this.setAnimation(opts.animate);
+    this.setAnimation();
 
     // dynamic grids require pausing during drag to detect over to nest vs push
     if (opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;
@@ -794,8 +795,8 @@ export class GridStack {
     delete this._ignoreLayoutsNodeChange;
     delete this._insertNotAppend;
     prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
-    // delay adding animation back, but check to make sure grid (opt) is still around
-    if (noAnim && this.opts?.animate) setTimeout(() => { if (this.opts) this.setAnimation(this.opts.animate) });
+    // delay adding animation back
+    if (noAnim && this.opts?.animate) this.setAnimation(this.opts.animate, true);
     return this;
   }
 
@@ -1255,15 +1256,20 @@ export class GridStack {
   /**
    * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
    * @param doAnimate if true the grid will animate.
+   * @param delay if true setting will be set on next event loop.
    */
-  public setAnimation(doAnimate: boolean): GridStack {
-    if (doAnimate) {
+  public setAnimation(doAnimate = this.opts.animate, delay?: boolean): GridStack {
+    if (delay) {
+      // delay, but check to make sure grid (opt) is still around
+      setTimeout(() => { if (this.opts) this.setAnimation(doAnimate) });
+    } else if (doAnimate) {
       this.el.classList.add('grid-stack-animate');
     } else {
       this.el.classList.remove('grid-stack-animate');
     }
     return this;
   }
+
   /** @internal */
   private hasAnimationCSS(): boolean { return this.el.classList.contains('grid-stack-animate') }
 
@@ -1370,12 +1376,14 @@ export class GridStack {
   }
 
   private moveNode(n: GridStackNode, m: GridStackMoveOpts) {
-    this.engine.cleanNodes()
-      .beginUpdate(n)
-      .moveNode(n, m);
+    const wasUpdating = n._updating;
+    if (!wasUpdating) this.engine.cleanNodes().beginUpdate(n);
+    this.engine.moveNode(n, m);
     this._updateContainerHeight();
-    this._triggerChangeEvent();
-    this.engine.endUpdate();
+    if (!wasUpdating) {
+      this._triggerChangeEvent();
+      this.engine.endUpdate();
+    }
   }
 
   /**
@@ -1435,6 +1443,27 @@ export class GridStack {
     else this.resizeToContent(el);
   }
 
+  /** rotate (by swapping w & h) the passed in node - called when user press 'r' during dragging
+   * @param els  widget or selector of objects to modify
+   * @param relative optional pixel coord relative to upper/left corner to rotate around (will keep that cell under cursor)
+   */
+  public rotate(els: GridStackElement, relative?: Position): GridStack {
+    GridStack.getElements(els).forEach(el => {
+      let n = el.gridstackNode;
+      if (!n || n.w === n.h) return;
+      const rot: GridStackWidget = { w: n.h, h: n.w, minH: n.minW, minW: n.minH, maxH: n.maxW, maxW: n.maxH };
+      // if given an offset, adjust x/y by column/row bounds when user presses 'r' during dragging
+      if (relative) {
+        let pivotX = relative.left > 0 ? Math.floor(relative.left / this.cellWidth()) : 0;
+        let pivotY = relative.top > 0 ? Math.floor(relative.top / (this.opts.cellHeight as number)) : 0;
+        rot.x = n.x + pivotX - (n.h - (pivotY+1));
+        rot.y = (n.y + pivotY) - pivotX;
+      }
+      this.update(el, rot);
+    });
+    return this;
+  }
+
   /**
    * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
    * @param value margin value
@@ -2289,8 +2318,8 @@ export class GridStack {
           this._gsEventHandler['dropped']({ ...event, type: 'dropped' }, origNode && origNode.grid ? origNode : undefined, node);
         }
 
-        // delay adding animation back, but check to make sure grid (opt) is still around
-        if (noAnim) setTimeout(() => { if (this.opts) this.setAnimation(this.opts.animate) });
+        // delay adding animation back
+        if (noAnim) this.setAnimation(this.opts.animate, true);
 
         return false; // prevent parent from receiving msg (which may be grid as well)
       });
@@ -2435,6 +2464,7 @@ export class GridStack {
     // @ts-ignore
     this._writePosAttr(this.placeholder, node)
     this.el.appendChild(this.placeholder);
+    this.placeholder.gridstackNode = node;
     // console.log('_onStartMoving placeholder') // TEST
 
     // if the element is inside a grid, it has already been scaled
