v2: fix setting resize handles to not alwaysShowResizeHandle

* fix for #1373
* Utils.defaults() now works recursively which was causing sub items to not e init properly.
* also cleaned up some signature calls to TS standards
* you can now have resize handles and still auto-hide them.

Author: adumesny

doc/CHANGES.md

@@ -41,6 +41,7 @@ Change log
 ## 2.0.1-dev
 
 - fix `animate` to not re-create CSS style each time (should be faster too) and made it default now since so much nicer. pass `{animate: false}` grid options if you want instant again [937](https://github.com/gridstack/gridstack.js/issues/937)
+- fix `resizable: { handles: ...}` forcing `alwaysShowResizeHandle` behavior [1373](https://github.com/gridstack/gridstack.js/issues/1373)
 
 ## 2.0.1 (2020-09-26)
 

spec/utils-spec.ts

@@ -104,6 +104,10 @@ describe('gridstack utils', function() {
       expect(src).toEqual({x: 1, y: 2, width: undefined});
       expect(Utils.defaults(src, {x: 10, width: 3})).toEqual({x: 1, y: 2, width: 3});
       expect(Utils.defaults(src, {height: undefined})).toEqual({x: 1, y: 2, width: 3, height: undefined});
+      src = {x: 1, y: 2, sub: {foo: 1, two: 2}};
+      expect(src).toEqual({x: 1, y: 2, sub: {foo: 1, two: 2}});
+      expect(Utils.defaults(src, {x: 10, width: 3})).toEqual({x: 1, y: 2, width: 3, sub: {foo: 1, two: 2}});
+      expect(Utils.defaults(src, {sub: {three: 3}})).toEqual({x: 1, y: 2, width: 3, sub: {foo: 1, two: 2, three: 3}});
     });
   });
 

src/gridstack.ts

@@ -189,7 +189,7 @@ export class GridStack {
       staticGrid: false,
       _class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
       animate: true,
-      alwaysShowResizeHandle: false,
+      alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,
       resizable: {
         autoHide: !(opts.alwaysShowResizeHandle || false),
         handles: 'se'

src/utils.ts

@@ -8,6 +8,11 @@
 
 import { GridStackWidget, GridStackNode, GridStackOptions, numberOrString } from './types';
 
+export interface HeightData {
+  height: number;
+  unit: string;
+}
+
 /** checks for obsolete method names */
 export function obsolete(self, f, oldName: string, newName: string, rev: string) {
   let wrapper = (...args) => {
@@ -132,7 +137,7 @@ export class Utils {
     return (value === null || value.length === 0) ? null : Number(value);
   }
 
-  static parseHeight(val: numberOrString) {
+  static parseHeight(val: numberOrString): HeightData {
     let height: number;
     let heightUnit = 'px';
     if (typeof val === 'string') {
@@ -145,23 +150,29 @@ export class Utils {
     } else {
       height = val;
     }
-    return { height: height, unit: heightUnit }
+    return { height, unit: heightUnit }
   }
 
-  static defaults(target, ...sources) {
+  /** copies unset fields in target to use the given default sources values */
+  static defaults(target, ...sources): {} {
 
-    sources.forEach(function (source) {
-      for (let prop in source) {
-        if (Object.prototype.hasOwnProperty.call(source, prop) && (target[prop] === null || target[prop] === undefined)) {
-          target[prop] = source[prop];
+    sources.forEach(source => {
+      for (const key in source) {
+        if (!source.hasOwnProperty(key)) { return; }
+        if (target[key] === null || target[key] === undefined) {
+          target[key] = source[key];
+        } else if (typeof source[key] === 'object' && typeof target[key] === 'object') {
+          // property is an object, recursively add it's field over... #1373
+          this.defaults(target[key], source[key]);
         }
       }
     });
 
     return target;
   }
 
-  static clone(target: {}) {
+  /** makes a shallow copy of the passed json struct */
+  static clone(target: {}): {} {
     return {...target}; // was $.extend({}, target)
   }
 
@@ -177,11 +188,11 @@ export class Utils {
   static throttle(callback: () => void, delay: number) {
     let isWaiting = false;
 
-    return function (...args) {
+    return (...args) => {
       if (!isWaiting) {
         callback.apply(this, args);
         isWaiting = true;
-        setTimeout(function () { isWaiting = false; }, delay);
+        setTimeout(() => isWaiting = false, delay);
       }
     }
   }