restrict vertical resize with sizeToContent

adumesny · adumesny · commit ec35618074d3 · 2024-02-04T09:31:30.000-08:00
* 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.
diff --git 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
@@ -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;
