From ec35618074d33abfe10b51e82cc811ace51fca43 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Sun, 4 Feb 2024 09:31:30 -0800
Subject: [PATCH] restrict vertical resize with sizeToContent

* since sizeToContent:true will automatically size the content vertically, don't let the user change the height to start with

Note: tried to change the feedback to have e,w arrows but we only have 10px area which is too narrow to show feedback (we have 20x20 for corners that may overlap content which is ok). Showing normal handles for now.
---
 src/dd-gridstack.ts | 15 ++++++++++++---
 src/dd-resizable.ts | 15 +++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/dd-gridstack.ts b/src/dd-gridstack.ts
index cd404c6af..bac79fdfa 100644
--- a/src/dd-gridstack.ts
+++ b/src/dd-gridstack.ts
@@ -40,9 +40,18 @@ export class DDGridStack {
       } else if (opts === 'option') {
         dEl.setupResizable({ [key]: value });
       } else {
-        const grid = dEl.el.gridstackNode.grid;
-        let handles = dEl.el.getAttribute('gs-resize-handles') ? dEl.el.getAttribute('gs-resize-handles') : grid.opts.resizable.handles;
-        let autoHide = !grid.opts.alwaysShowResizeHandle;
+        const n = dEl.el.gridstackNode;
+        const grid = n.grid;
+        let handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se';
+        if (handles === 'all') handles = 'n,e,s,w,se,sw,ne,nw';
+        // NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead
+        // restrict vertical resize if height is done to match content anyway... odd to have it spring back
+        // if (Utils.shouldSizeToContent(n)) {
+        //   const doE = handles.indexOf('e') !== -1;
+        //   const doW = handles.indexOf('w') !== -1;
+        //   handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : '');
+        // }
+        const autoHide = !grid.opts.alwaysShowResizeHandle;
         dEl.setupResizable({
           ...grid.opts.resizable,
           ...{ handles, autoHide },
diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts
index 8afafb16a..e4dc30fa7 100644
--- a/src/dd-resizable.ts
+++ b/src/dd-resizable.ts
@@ -6,7 +6,7 @@
 import { DDResizableHandle } from './dd-resizable-handle';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { Utils } from './utils';
-import { DDUIData, Rect, Size } from './types';
+import { DDUIData, GridItemHTMLElement, Rect, Size } from './types';
 import { DDManager } from './dd-manager';
 
 // import { GridItemHTMLElement } from './types'; let count = 0; // TEST
@@ -32,7 +32,7 @@ interface RectScaleReciprocal {
 export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt<DDResizableOpt> {
 
   // have to be public else complains for HTMLElementExtendOpt ?
-  public el: HTMLElement;
+  public el: GridItemHTMLElement;
   public option: DDResizableOpt;
 
   /** @internal */
@@ -57,6 +57,8 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   protected parentOriginStylePosition: string;
   /** @internal */
   protected static _originStyleProp = ['width', 'height', 'position', 'left', 'top', 'opacity', 'zIndex'];
+  /** @internal */
+  protected sizeToContent: boolean;
 
   constructor(el: HTMLElement, opts: DDResizableOpt = {}) {
     super();
@@ -152,11 +154,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   protected _setupHandlers(): DDResizable {
-    let handlerDirection = this.option.handles || 'e,s,se';
-    if (handlerDirection === 'all') {
-      handlerDirection = 'n,e,s,w,se,sw,ne,nw';
-    }
-    this.handlers = handlerDirection.split(',')
+    this.handlers = this.option.handles.split(',')
       .map(dir => dir.trim())
       .map(dir => new DDResizableHandle(this.el, dir, {
         start: (event: MouseEvent) => {
@@ -174,6 +172,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   protected _resizeStart(event: MouseEvent): DDResizable {
+    this.sizeToContent = Utils.shouldSizeToContent(this.el.gridstackNode);
     this.originalRect = this.el.getBoundingClientRect();
     this.scrollEl = Utils.getScrollElement(this.el);
     this.scrollY = this.scrollEl.scrollTop;
@@ -260,7 +259,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     };
 
     const offsetX = event.clientX - oEvent.clientX;
-    const offsetY = event.clientY - oEvent.clientY;
+    const offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize
 
     if (dir.indexOf('e') > -1) {
       newRect.width += offsetX;