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

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @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
+
+- [`de7463c7096`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de7463c7096) - Exposing some additional TypeScript types. These can be helpful when creating helper packages.
+
+  ```ts
+  import type {
+    // These types are not needed for consumers
+    // They are mostly helpful for other packages
+    AllDragTypes,
+    MonitorArgs,
+    BaseEventPayload,
+  } from '@atlaskit/pragmatic-drag-and-drop/types';
+  ```
+
+  - `AllDragTypes`: representation of all entities types in the system (eg element and file)
+  - `MonitorArgs<DragType extends AllDragTypes>`: the arguments that can be passed to a monitor
+  - `BaseEventPayload<DragType extends AllDragTypes>`: the shared properties in all events
+
 ## 0.20.0
 
 ### Minor Changes

package/constellation/index/about.mdx

@@ -49,7 +49,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 _Draggables_, _drop targets_ and _monitors_ return a cleanup function.
 
 ```ts
-import { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 const cleanup: CleanupFn = draggable({ element: myElement });

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/types.d.ts

@@ -1 +1 @@
-export type { DropTargetRecord, Position, SourceCanStartArgs, Input, DragLocation, DragLocationHistory, CleanupFn, } from '../internal-types';
+export type { DropTargetRecord, Position, SourceCanStartArgs, Input, DragLocation, DragLocationHistory, CleanupFn, AllDragTypes, MonitorArgs, BaseEventPayload, } from '../internal-types';

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/types.d.ts

@@ -1 +1 @@
-export type { DropTargetRecord, Position, SourceCanStartArgs, Input, DragLocation, DragLocationHistory, CleanupFn, } from '../internal-types';
+export type { DropTargetRecord, Position, SourceCanStartArgs, Input, DragLocation, DragLocationHistory, CleanupFn, AllDragTypes, MonitorArgs, BaseEventPayload, } from '../internal-types';

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.20.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.20.0",
-	"sideEffects": false
-}

package/dist/es2019/version.json

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

package/dist/esm/version.json

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