@atlaskit/pragmatic-drag-and-drop 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/pragmatic-drag-and-drop
 
+## 0.22.0
+
+### Minor Changes
+
+- [`d644a68ddf6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d644a68ddf6) - Added a new `setCustomNativeDragPreview` `getOffset` utililiy: `preserveOffsetFromPointer`. `preserveOffsetFromPointer` mimics the default behaviour for non custom drag previews when starting a drag: the initial cursor position offset is preserved for a seamless drag and drop experience.
+
+  ```ts
+  import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+  import { preserveOffsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/preserve-offset-from-pointer';
+
+  draggable({
+    element: myElement,
+    onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
+      setCustomNativeDragPreview({
+        getOffset: preserveOffsetFromPointer({
+          sourceElement: source.element,
+          input: location.current.input,
+        }),
+        render: function render({ container }) {
+          /* ... */
+        },
+        nativeSetDragImage,
+      });
+    },
+  });
+  ```
+
 ## 0.21.0
 
 ### Minor Changes

package/dist/cjs/entry-point/util/preserve-offset-from-pointer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "preserveOffsetFromPointer", {
+  enumerable: true,
+  get: function get() {
+    return _preserveOffsetFromPointer.preserveOffsetFromPointer;
+  }
+});
+var _preserveOffsetFromPointer = require("../../util/custom-native-drag-preview/preserve-offset-from-pointer");

package/dist/cjs/util/custom-native-drag-preview/preserve-offset-from-pointer.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preserveOffsetFromPointer = preserveOffsetFromPointer;
+function preserveOffsetFromPointer(_ref) {
+  var sourceElement = _ref.sourceElement,
+    input = _ref.input;
+  return function (_ref2) {
+    var container = _ref2.container;
+    var sourceRect = sourceElement.getBoundingClientRect();
+    var containerRect = container.getBoundingClientRect();
+    var offsetX = Math.min(
+    // difference
+    input.clientX - sourceRect.x,
+    // don't let the difference be more than the width of the container,
+    // otherwise the pointer will be off the preview
+    containerRect.width);
+    var offsetY = Math.min(
+    // difference
+    input.clientY - sourceRect.y,
+    // don't let the difference be more than the height of the container,
+    // otherwise the pointer will be off the preview
+    containerRect.height);
+    return {
+      x: offsetX,
+      y: offsetY
+    };
+  };
+}

package/dist/es2019/entry-point/util/preserve-offset-from-pointer.js

@@ -0,0 +1 @@
+export { preserveOffsetFromPointer } from '../../util/custom-native-drag-preview/preserve-offset-from-pointer';

package/dist/es2019/util/custom-native-drag-preview/preserve-offset-from-pointer.js

@@ -0,0 +1,27 @@
+export function preserveOffsetFromPointer({
+  sourceElement,
+  input
+}) {
+  return ({
+    container
+  }) => {
+    const sourceRect = sourceElement.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const offsetX = Math.min(
+    // difference
+    input.clientX - sourceRect.x,
+    // don't let the difference be more than the width of the container,
+    // otherwise the pointer will be off the preview
+    containerRect.width);
+    const offsetY = Math.min(
+    // difference
+    input.clientY - sourceRect.y,
+    // don't let the difference be more than the height of the container,
+    // otherwise the pointer will be off the preview
+    containerRect.height);
+    return {
+      x: offsetX,
+      y: offsetY
+    };
+  };
+}

package/dist/esm/entry-point/util/preserve-offset-from-pointer.js

@@ -0,0 +1 @@
+export { preserveOffsetFromPointer } from '../../util/custom-native-drag-preview/preserve-offset-from-pointer';

package/dist/esm/util/custom-native-drag-preview/preserve-offset-from-pointer.js

@@ -0,0 +1,25 @@
+export function preserveOffsetFromPointer(_ref) {
+  var sourceElement = _ref.sourceElement,
+    input = _ref.input;
+  return function (_ref2) {
+    var container = _ref2.container;
+    var sourceRect = sourceElement.getBoundingClientRect();
+    var containerRect = container.getBoundingClientRect();
+    var offsetX = Math.min(
+    // difference
+    input.clientX - sourceRect.x,
+    // don't let the difference be more than the width of the container,
+    // otherwise the pointer will be off the preview
+    containerRect.width);
+    var offsetY = Math.min(
+    // difference
+    input.clientY - sourceRect.y,
+    // don't let the difference be more than the height of the container,
+    // otherwise the pointer will be off the preview
+    containerRect.height);
+    return {
+      x: offsetX,
+      y: offsetY
+    };
+  };
+}

package/dist/types/entry-point/util/preserve-offset-from-pointer.d.ts

@@ -0,0 +1 @@
+export { preserveOffsetFromPointer } from '../../util/custom-native-drag-preview/preserve-offset-from-pointer';

package/dist/types/util/custom-native-drag-preview/preserve-offset-from-pointer.d.ts

@@ -0,0 +1,6 @@
+import { Input } from '../../entry-point/types';
+import type { GetOffsetFn } from './types';
+export declare function preserveOffsetFromPointer({ sourceElement, input, }: {
+    sourceElement: HTMLElement;
+    input: Input;
+}): GetOffsetFn;

package/dist/types-ts4.5/entry-point/util/preserve-offset-from-pointer.d.ts

@@ -0,0 +1 @@
+export { preserveOffsetFromPointer } from '../../util/custom-native-drag-preview/preserve-offset-from-pointer';

package/dist/types-ts4.5/util/custom-native-drag-preview/preserve-offset-from-pointer.d.ts

@@ -0,0 +1,6 @@
+import { Input } from '../../entry-point/types';
+import type { GetOffsetFn } from './types';
+export declare function preserveOffsetFromPointer({ sourceElement, input, }: {
+    sourceElement: HTMLElement;
+    input: Input;
+}): GetOffsetFn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "The core Pragmatic drag and drop framework, optimized for performance.",
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
@@ -46,6 +46,7 @@
     "./util/set-custom-native-drag-preview": "./src/entry-point/util/set-custom-native-drag-preview.ts",
     "./util/offset-from-pointer": "./src/entry-point/util/offset-from-pointer.ts",
     "./util/center-under-pointer": "./src/entry-point/util/center-under-pointer.ts",
+    "./util/preserve-offset-from-pointer": "./src/entry-point/util/preserve-offset-from-pointer.ts",
     "./util/disable-native-drag-preview": "./src/entry-point/util/disable-native-drag-preview.ts",
     "./util/scroll-just-enough-into-view": "./src/entry-point/util/scroll-just-enough-into-view.ts",
     "./experimental/cross-window-element-adapter": "./src/entry-point/experimental/cross-with-element-adapter.ts"

package/util/preserve-offset-from-pointer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/pragmatic-drag-and-drop/util/preserve-offset-from-pointer",
+  "main": "../../dist/cjs/entry-point/util/preserve-offset-from-pointer.js",
+  "module": "../../dist/esm/entry-point/util/preserve-offset-from-pointer.js",
+  "module:es2019": "../../dist/es2019/entry-point/util/preserve-offset-from-pointer.js",
+  "sideEffects": false,
+  "types": "../../dist/types/entry-point/util/preserve-offset-from-pointer.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-point/util/preserve-offset-from-pointer.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "0.21.0",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "0.21.0",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "0.21.0",
-	"sideEffects": false
-}