Allow cell height in cm and mm units

Author: Joost Zöllner

doc/README.md

@@ -87,7 +87,7 @@ gridstack.js API
 - `auto` - if `false` gridstack will not initialize existing items (default: `true`)
 - `cellHeight`- one cell height (default?: 'auto'). Can be:
    *  an integer (px)
-   *  a string (ex: '100px', '10em', '10rem'). Note: % doesn't right - see [CellHeight](http://gridstackjs.com/demo/cell-height.html)
+   *  a string (ex: '100px', '10em', '10rem', '10cm'). Note: % doesn't right - see [CellHeight](http://gridstackjs.com/demo/cell-height.html)
    *  0, in which case the library will not generate styles for rows. Everything must be defined in your own CSS files.
    *  `auto` - height will be calculated for square cells (width / column) and updated live as you resize the window - also see `cellHeightThrottle`
    *  `initial` - similar to 'auto' (start at square cells) but stay that size during window resizing.

spec/utils-spec.ts

@@ -76,6 +76,8 @@ describe('gridstack utils', function() {
       expect(Utils.parseHeight('12.3vh')).toEqual(jasmine.objectContaining({h: 12.3, unit: 'vh'}));
       expect(Utils.parseHeight('12.3vw')).toEqual(jasmine.objectContaining({h: 12.3, unit: 'vw'}));
       expect(Utils.parseHeight('12.3%')).toEqual(jasmine.objectContaining({h: 12.3, unit: '%'}));
+      expect(Utils.parseHeight('12.5cm')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'cm'}));
+      expect(Utils.parseHeight('12.5mm')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'mm'}));
       expect(Utils.parseHeight('12.5')).toEqual(jasmine.objectContaining({h: 12.5, unit: 'px'}));
       expect(function() { Utils.parseHeight('12.5 df'); }).toThrowError('Invalid height');
     });
@@ -89,6 +91,8 @@ describe('gridstack utils', function() {
       expect(Utils.parseHeight('-12.3vh')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'vh'}));
       expect(Utils.parseHeight('-12.3vw')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'vw'}));
       expect(Utils.parseHeight('-12.3%')).toEqual(jasmine.objectContaining({h: -12.3, unit: '%'}));
+      expect(Utils.parseHeight('-12.3cm')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'cm'}));
+      expect(Utils.parseHeight('-12.3mm')).toEqual(jasmine.objectContaining({h: -12.3, unit: 'mm'}));
       expect(Utils.parseHeight('-12.5')).toEqual(jasmine.objectContaining({h: -12.5, unit: 'px'}));
       expect(function() { Utils.parseHeight('-12.5 df'); }).toThrowError('Invalid height');
     });

src/gridstack.ts

@@ -811,13 +811,20 @@ export class GridStack {
        (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
       return this.opts.cellHeight as number;
     }
-    // do rem/em to px conversion
+    // do rem/em/cm/mm to px conversion
     if (this.opts.cellHeightUnit === 'rem') {
       return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(document.documentElement).fontSize);
     }
     if (this.opts.cellHeightUnit === 'em') {
       return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(this.el).fontSize);
     }
+    if (this.opts.cellHeightUnit === 'cm') {
+      // 1cm = 96px/2.54. See https://www.w3.org/TR/css-values-3/#absolute-lengths
+      return (this.opts.cellHeight as number) * (96 / 2.54);
+    }
+    if (this.opts.cellHeightUnit === 'mm') {
+      return (this.opts.cellHeight as number) * (96 / 2.54) / 10;
+    }
     // else get first cell height
     let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;
     if (el) {

src/utils.ts

@@ -219,7 +219,7 @@ export class Utils {
     if (typeof val === 'string') {
       if (val === 'auto' || val === '') h = 0;
       else {
-        let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/);
+        let match = val.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%|cm|mm)?$/);
         if (!match) {
           throw new Error(`Invalid height val = ${val}`);
         }