Merge pull request #2578 from Amdoun/master

apply position scaling when acceptwidgets is enabled

src/dd-draggable.ts

@@ -4,7 +4,7 @@
  */
 
 import { DDManager } from './dd-manager';
-import { Utils } from './utils';
+import { DragTransform, Utils } from './utils';
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { GridItemHTMLElement, DDUIData } from './types';
 import { DDElementHost } from './dd-element';
@@ -33,11 +33,6 @@ interface DragOffset {
  offsetTop: number;
 }
 
-interface DragScaleReciprocal {
- x: number;
- y: number;
-}
-
 type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
 
 // make sure we are not clicking on known object that handles mouseDown
@@ -55,8 +50,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
  /** @internal */
  protected dragOffset: DragOffset;
  /** @internal */
- protected dragScale: DragScaleReciprocal = { x: 1, y: 1 };
- /** @internal */
  protected dragElementOriginStyle: Array<string>;
  /** @internal */
  protected dragEl: HTMLElement;
@@ -70,6 +63,13 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
  protected static originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];
  /** @internal pause before we call the actual drag hit collision code */
  protected dragTimeout: number;
+ /** @internal */
+ protected dragTransform: DragTransform = {
+ xScale: 1,
+ yScale: 1,
+ xOffset: 0,
+ yOffset: 0
+ };
 
  constructor(el: HTMLElement, option: DDDraggableOpt = {}) {
  super();
@@ -214,6 +214,9 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
  }
  this.helper = this._createHelper(e);
  this._setupHelperContainmentStyle();
+ this.dragTransform = Utils.getValuesFromTransformedElement(
+ this.helperContainment
+ );
  this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
  const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });
 
@@ -336,8 +339,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
  // }
  const style = this.helper.style;
  const offset = this.dragOffset;
- style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragScale.x + 'px';
- style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragScale.y + 'px';
+ style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px';
+ style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px';
  }
 
  /** @internal */
@@ -359,25 +362,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
  let xformOffsetX = 0;
  let xformOffsetY = 0;
  if (parent) {
- const testEl = document.createElement('div');
- Utils.addElStyles(testEl, {
- opacity: '0',
- position: 'fixed',
- top: 0 + 'px',
- left: 0 + 'px',
- width: '1px',
- height: '1px',
- zIndex: '-999999',
- });
- parent.appendChild(testEl);
- const testElPosition = testEl.getBoundingClientRect();
- parent.removeChild(testEl);
- xformOffsetX = testElPosition.left;
- xformOffsetY = testElPosition.top;
- this.dragScale = {
- x: 1 / testElPosition.width,
- y: 1 / testElPosition.height
- };
+ xformOffsetX = this.dragTransform.xOffset;
+ xformOffsetY = this.dragTransform.yOffset;
  }
 
  const targetOffset = el.getBoundingClientRect();
@@ -386,8 +372,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
  top: targetOffset.top,
  offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,
  offsetTop: - event.clientY + targetOffset.top - xformOffsetY,
- width: targetOffset.width * this.dragScale.x,
- height: targetOffset.height * this.dragScale.y
+ width: targetOffset.width * this.dragTransform.xScale,
+ height: targetOffset.height * this.dragTransform.yScale
  };
  }
 
@@ -398,8 +384,8 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
  const offset = this.helper.getBoundingClientRect();
  return {
  position: { //Current CSS position of the helper as { top, left } object
- top: (offset.top - containmentRect.top) * this.dragScale.y,
- left: (offset.left - containmentRect.left) * this.dragScale.x
+ top: (offset.top - containmentRect.top) * this.dragTransform.yScale,
+ left: (offset.left - containmentRect.left) * this.dragTransform.xScale
  }
  /* not used by GridStack for now...
  helper: [this.helper], //The object arr representing the helper that's being dragged.

src/dd-resizable.ts

@@ -226,22 +226,10 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
  this.parentOriginStylePosition = this.el.parentElement.style.position;
 
  const parent = this.el.parentElement;
- const testEl = document.createElement('div');
- Utils.addElStyles(testEl, {
- opacity: '0',
- position: 'fixed',
- top: 0 + 'px',
- left: 0 + 'px',
- width: '1px',
- height: '1px',
- zIndex: '-999999',
- });
- parent.appendChild(testEl);
- const testElPosition = testEl.getBoundingClientRect();
- parent.removeChild(testEl);
+ const dragTransform = Utils.getValuesFromTransformedElement(parent);
  this.rectScale = {
- x: 1 / testElPosition.width,
- y: 1 / testElPosition.height
+ x: dragTransform.xScale,
+ y: dragTransform.yScale
  };
 
  if (getComputedStyle(this.el.parentElement).position.match(/static/)) {

src/gridstack.ts

@@ -6,7 +6,7 @@
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
 import { GridStackEngine } from './gridstack-engine';
-import { Utils, HeightData, obsolete } from './utils';
+import { Utils, HeightData, obsolete, DragTransform } from './utils';
 import { gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,
  GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions,
  dragInDefaultOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, GridStackMoveOpts, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler } from './types';
@@ -261,6 +261,8 @@ export class GridStack {
  protected _extraDragRow = 0;
  /** @internal true if nested grid should get column count from our width */
  protected _autoColumn?: boolean;
+ /** @internal meant to store the scale of the active grid */
+ protected dragTransform: DragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 };
  private _skipInitialResize: boolean;
 
  /**
@@ -2046,11 +2048,29 @@ export class GridStack {
  if (!node) return;
 
  helper = helper || el;
+
+ // if the element is being dragged from outside, scale it down to match the grid's scale
+ // and slightly adjust its position relative to the mouse
+ if (!node.grid?.el) {
+ // this scales the helper down
+ helper.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
+ // this makes it so that the helper is well positioned relative to the mouse after scaling
+ const helperRect = helper.getBoundingClientRect();
+ helper.style.left = helperRect.x + (this.dragTransform.xScale - 1) * (event.clientX - helperRect.x) / this.dragTransform.xScale + 'px';
+ helper.style.top = helperRect.y + (this.dragTransform.yScale - 1) * (event.clientY - helperRect.y) / this.dragTransform.yScale + 'px';
+ helper.style.transformOrigin = `0px 0px`
+ }
+
  let parent = this.el.getBoundingClientRect();
  let {top, left} = helper.getBoundingClientRect();
  left -= parent.left;
  top -= parent.top;
- let ui: DDUIData = {position: {top, left}};
+ let ui: DDUIData = {
+ position: {
+ top: top * this.dragTransform.xScale,
+ left: left * this.dragTransform.yScale
+ }
+ };
 
  if (node._temporaryRemoved) {
  node.x = Math.max(0, Math.round(left / cellWidth));
@@ -2406,6 +2426,27 @@ export class GridStack {
  this.el.appendChild(this.placeholder);
  // console.log('_onStartMoving placeholder') // TEST
 
+ // if the element is inside a grid, it has already been scaled
+ // we can use that as a scale reference
+ if (node.grid?.el) {
+ this.dragTransform = Utils.getValuesFromTransformedElement(el);
+ }
+ // if the element is being dragged from outside (not from any grid)
+ // we use the grid as the transformation reference, since the helper is not subject to transformation
+ else if (this.placeholder && this.placeholder.closest('.grid-stack')) {
+ const gridEl = this.placeholder.closest('.grid-stack') as HTMLElement;
+ this.dragTransform = Utils.getValuesFromTransformedElement(gridEl);
+ }
+ // Fallback
+ else {
+ this.dragTransform = {
+ xScale: 1,
+ xOffset: 0,
+ yScale: 1,
+ yOffset: 0,
+ }
+ }
+
  node.el = this.placeholder;
  node._lastUiPosition = ui.position;
  node._prevYPix = ui.position.top;
@@ -2526,6 +2567,9 @@ export class GridStack {
  let node = el.gridstackNode;
  if (!node) return;
 
+ helper = helper || el;
+ // restore the scale of the helper on leave
+ helper.style.transform = 'scale(1)';
  dd.off(el, 'drag'); // no need to track while being outside
 
  // this gets called when cursor leaves and shape is outside, so only do this once

src/utils.ts

@@ -10,6 +10,13 @@ export interface HeightData {
  unit: string;
 }
 
+export interface DragTransform {
+ xScale: number;
+ yScale: number;
+ xOffset: number;
+ yOffset: number;
+}
+
 /** checks for obsolete method names */
 // eslint-disable-next-line
 export function obsolete(self, f, oldName: string, newName: string, rev: string): (...args: any[]) => any {
@@ -554,6 +561,33 @@ export class Utils {
  (target || e.target).dispatchEvent(simulatedEvent);
  }
 
+ /**
+ * defines an element that is used to get the offset and scale from grid transforms
+ * returns the scale and offsets from said element
+ */
+ public static getValuesFromTransformedElement(parent: HTMLElement): DragTransform {
+ const transformReference = document.createElement('div');
+ Utils.addElStyles(transformReference, {
+ opacity: '0',
+ position: 'fixed',
+ top: 0 + 'px',
+ left: 0 + 'px',
+ width: '1px',
+ height: '1px',
+ zIndex: '-999999',
+ });
+ parent.appendChild(transformReference);
+ const transformValues = transformReference.getBoundingClientRect();
+ parent.removeChild(transformReference);
+ transformReference.remove();
+ return {
+ xScale: 1 / transformValues.width,
+ yScale: 1 / transformValues.height,
+ xOffset: transformValues.left,
+ yOffset: transformValues.top,
+ }
+ }
+
  /** returns true if event is inside the given element rectangle */
  // Note: Safari Mac has null event.relatedTarget which causes #1684 so check if DragEvent is inside the coordinates instead
  // this.el.contains(event.relatedTarget as HTMLElement)