Merge pull request #1734 from adumesny/master

adumesny · web-flow · commit 486fb3f59eda · 2021-04-18T09:33:52.000-07:00
fix sizing from top/left
diff --git a/README.md b/README.md
@@ -264,13 +264,11 @@ you can init gridstack like:
 ```js
 GridStack.init({
   resizable: {
-    handles: 'e, se, s, sw, w'
+    handles: 'e,se,s,sw,w'
   }
 });
 ```
 
-Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behavior may be unexpected.
-
 ## Touch devices support
 
 gridstack v3.2 jq version compiles touch support (html5 version does not yet support `touchmove` events. This will be added in a future release), so it works out of the box, no need for anything.
diff --git a/demo/float.html b/demo/float.html
@@ -22,7 +22,10 @@ <h1>Float grid demo</h1>
   </div>
   <script src="events.js"></script>
   <script type="text/javascript">
-    let grid = GridStack.init({float: true});
+    let grid = GridStack.init({
+      float: true, 
+      resizable: { handles: 'all'} // do all sides for testing
+    });
     addEvents(grid);
 
     let items = [
diff --git a/demo/mobile.html b/demo/mobile.html
@@ -12,7 +12,7 @@
 </head>
 <body>
   <h1>Simple mobile demo</h1>
-  <p>uses v3.2+ jquery version which now includes jquery.ui.touch-punch by default (small 2k)</p>
+  <p>uses gridstack-jq.js which includes jquery.ui.touch-punch by default (minimum v3.2+, small 2k)</p>
   <div class="grid-stack"></div>
   <script type="text/javascript">
     let grid = GridStack.init({
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -59,6 +59,7 @@ Change log
 - fix [#1700](https://github.com/gridstack/gridstack.js/issues/1700) JQ nested grid drag fix broken in 4.0.3 (but much older underlying issue)
 - fix [#1678](https://github.com/gridstack/gridstack.js/issues/1678) item gs-x:0 not animating fix
 - fix [#1678](https://github.com/gridstack/gridstack.js/pull/1678) resize-scroll issue when grid is not at top of page. Thanks [@Manfred-on-github](https://github.com/Manfred-on-github)
+- fix [#1728](https://github.com/gridstack/gridstack.js/issues/1728) fix sizing from top/left sides
 
 ## 4.2.0 (2021-4-11)
 
diff --git a/doc/README.md b/doc/README.md
@@ -97,7 +97,7 @@ gridstack.js API
   * example `dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone', handle: '.grid-stack-item-content' }`
   * **Note**: if you have multiple grids, it's best to call `GridStack.setupDragIn()` with same params as it only need to be done once.
   * **Note2**: instead of 'clone' you can also pass your own function (get passed the event).
-- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body', containment: null}`)
+- `draggable` - allows to override draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body', containment: null}`)
 - `dragOut` to let user drag nested grid items out of a parent or not (default false) See [example](http://gridstackjs.com/demo/nested.html)
 - `float` - enable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
 - `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
@@ -116,12 +116,12 @@ gridstack.js API
 - `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`)
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
 - `placeholderText` - placeholder default content (default: `''`)
-- `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
-- `removable` - if `true` widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, in this case widgets will be removed by dropping them there (default: `false`) See [example](http://gridstackjs.com/demo/two.html)
+- `resizable` - allows to override resizable options. (default: `{autoHide: true, handles: 'se'}`). `handles` can be any combo of `n,ne,e,se,s,sw,w,nw` or `all`.
+- `removable` - if `true` widgets could be removed by dragging outside of the grid. It could also be a selector string, in this case widgets will be removed by dropping them there (default: `false`) See [example](http://gridstackjs.com/demo/two.html)
 - `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
 - `row` - fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain)
 - `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](http://gridstackjs.com/demo/rtl.html)
-- `staticGrid` - removes drag&drop&resize (default `false`). If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.
+- `staticGrid` - removes drag|drop|resize (default `false`). If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work. You can use the smaller gridstack-static.js lib. A CSS class `grid-stack-static` is also added to the container.
 - `styleInHead` - if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`).
 
 ## Grid attributes
@@ -144,7 +144,7 @@ The widget can still be dragged or resized by the user.
 You need to add `noResize` and `noMove` attributes to completely lock the widget.
 - `noResize` - disable element resizing
 - `noMove` - disable element moving
-- `resizeHandles` - sets resize handles for a specific widget.
+- `resizeHandles` - widgets can have their own custom resize handles. For example 'e,w' will make that particular widget only resize east and west. See `resizable: {handles: string}` option
 - `id`- (number | string) good for quick identification (for example in change event)
 - `content` - (string) html content to be added when calling `grid.load()/addWidget()` as content inside the item
 - `subGrid`: GridStackOptions - optional nested grid options and list of children
@@ -161,7 +161,7 @@ that is affected.
 You can call it on a single event name, or space separated list like:
 `grid.on('added removed change', ...)`
 
-The Typescript `GridStackEvent` list all possible values, and nothing else is supported by the `grid.on()` method, though it's possible to register directly for other events generated by the drag&drop plugging implementation detail (currently jquery-ui based so you can still use `$(".grid-stack").on(...)`).
+The Typescript `GridStackEvent` list all possible values, and nothing else is supported by the `grid.on()` method, though it's possible to register directly for other events generated by the drag&drop plugging implementation detail (if jquery-ui based you can still use `$(".grid-stack").on(...)`).
 
 ### added(event, items)
 
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
@@ -565,10 +565,12 @@ GridStack.prototype._dragOrResize = function(el: GridItemHTMLElement, event: Eve
     if (node.w === p.w && node.h === p.h) return;
     if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h) return; // skip one we tried (but failed)
 
-    // if we changed sizing on left side, move the item as well. Note: we don't support TOP resizing
-    if (Math.round(ui.position.left) < Math.round(node._orig.x * cellWidth)) { // use round or we can get slightly off compare
-      p.x = node._orig.x + node._orig.w - p.w;
-    }
+    // if we size on left/top side this might move us, so get possible new position as well
+    let left = ui.position.left + this.opts.marginLeft;
+    let top = ui.position.top + this.opts.marginTop;
+    p.x = Math.round(left / cellWidth);
+    p.y = Math.round(top / cellHeight);
+
     resizing = true;
   }
 
diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts
@@ -234,37 +234,35 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     const offsetY = event.clientY - oEvent.clientY;
 
     if (dir.indexOf('e') > -1) {
-      newRect.width += event.clientX - oEvent.clientX;
-    }
-    if (dir.indexOf('s') > -1) {
-      newRect.height += event.clientY - oEvent.clientY;
-    }
-    if (dir.indexOf('w') > -1) {
+      newRect.width += offsetX;
+    } else if (dir.indexOf('w') > -1) {
       newRect.width -= offsetX;
       newRect.left += offsetX;
     }
-    if (dir.indexOf('n') > -1) {
+    if (dir.indexOf('s') > -1) {
+      newRect.height += offsetY;
+    } else if (dir.indexOf('n') > -1) {
       newRect.height -= offsetY;
       newRect.top += offsetY
     }
-    const reshape = this._getReShapeSize(newRect.width, newRect.height);
-    if (newRect.width !== reshape.width) {
+    const constrain = this._constrainSize(newRect.width, newRect.height);
+    if (Math.round(newRect.width) !== Math.round(constrain.width)) { // round to ignore slight round-off errors
       if (dir.indexOf('w') > -1) {
-        newRect.left += newRect.width - reshape.width;
+        newRect.left += newRect.width - constrain.width;
       }
-      newRect.width = reshape.width;
+      newRect.width = constrain.width;
     }
-    if (newRect.height !== reshape.height) {
+    if (Math.round(newRect.height) !== Math.round(constrain.height)) {
       if (dir.indexOf('n') > -1) {
-        newRect.top += newRect.height - reshape.height;
+        newRect.top += newRect.height - constrain.height;
       }
-      newRect.height = reshape.height;
+      newRect.height = constrain.height;
     }
     return newRect;
   }
 
-  /** @internal */
-  private _getReShapeSize(oWidth: number, oHeight: number): Size {
+  /** @internal constrain the size to the set min/max values */
+  private _constrainSize(oWidth: number, oHeight: number): Size {
     const maxWidth = this.option.maxWidth || Number.MAX_SAFE_INTEGER;
     const minWidth = this.option.minWidth || oWidth;
     const maxHeight = this.option.maxHeight || Number.MAX_SAFE_INTEGER;
diff --git a/src/types.ts b/src/types.ts
@@ -243,7 +243,7 @@ export interface GridStackWidget extends GridStackPosition {
   noMove?: boolean;
   /** prevents moving and resizing (default?: undefined = un-constrained) */
   locked?: boolean;
-  /** widgets can have their own resize handles. For example 'e,w' will make the particular widget only resize east and west. */
+  /** widgets can have their own custom resize handles. For example 'e,w' will make that particular widget only resize east and west. See `resizable: {handles: string}` option */
   resizeHandles?: string;
   /** value for `gs-id` stored on the widget (default?: undefined) */
   id?: numberOrString;
