svelte-dnd-action - npm Package Compare versions

Comparing version 0.8.9 to 0.9.0

dist/index.d.ts

@@ -28,6 +28,7 @@ /**
     dropFromOthersDisabled?: boolean;
-    dropTargetClasses?: [string]
+    dropTargetClasses?: [string];
     dropTargetStyle?: Record<string, string>;
     transformDraggedElement?: TransformDraggedElementFunction;
     autoAriaDisabled?: boolean;
+    centreDraggedOnCursor?: boolean;
 }
@@ -34,0 +35,0 @@

package.json

@@ -43,3 +43,3 @@ {
     "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.8.9",
+    "version": "0.9.0",
     "repository": {
@@ -46,0 +46,0 @@ "type": "git",

README.md

@@ -117,2 +117,3 @@ # SVELTE DND ACTION [![Known Vulnerabilities](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action/badge.svg?targetFile=package.json)](https://snyk.io/test/github/isaacHagoel/svelte-dnd-action?targetFile=package.json)
 | `autoAriaDisabled` | Boolean | No | `false` | Setting it to true will disable all the automatically added aria attributes and aria alerts (for example when the user starts/ stops dragging using the keyboard).<br /> **Use it only if you intend to implement your own custom instructions, roles and alerts.** In such a case, you might find the exported function `alertToScreenReader(string)` useful. |
+| `centreDraggedOnCursor` | Boolean | No | `false` | Setting it to true will cause elements from this dnd-zone to position their center on the cursor on drag start, effectively turning the cursor to the focal point that triggers all the dnd events (ex: entering another zone). Useful for dnd-zones with large items that can be dragged over small items. |
 
@@ -119,0 +120,0 @@ ##### Output:

src/action.js

@@ -54,2 +54,3 @@ import {dndzone as pointerDndZone} from "./pointerAction";
         autoAriaDisabled,
+        centreDraggedOnCursor,
         ...rest
@@ -56,0 +57,0 @@ } = options;

src/helpers/styler.js

 import {SHADOW_ELEMENT_ATTRIBUTE_NAME} from "../constants";
+import {findCenter} from "./intersection";
 
@@ -16,5 +17,6 @@ const TRANSITION_DURATION_SECONDS = 0.2;
  * @param {HTMLElement} originalElement
+ * @param {Point} [positionCenterOnXY]
  * @return {Node} - the cloned, styled element
  */
-export function createDraggedElementFrom(originalElement) {
+export function createDraggedElementFrom(originalElement, positionCenterOnXY) {
     const rect = originalElement.getBoundingClientRect();
@@ -25,4 +27,15 @@ const draggedEl = originalElement.cloneNode(true);
     draggedEl.style.position = "fixed";
-    draggedEl.style.top = `${rect.top}px`;
-    draggedEl.style.left = `${rect.left}px`;
+    let elTopPx = rect.top;
+    let elLeftPx = rect.left;
+    draggedEl.style.top = `${elTopPx}px`;
+    draggedEl.style.left = `${elLeftPx}px`;
+    if (positionCenterOnXY) {
+        const center = findCenter(rect);
+        elTopPx -= center.y - positionCenterOnXY.y;
+        elLeftPx -= center.x - positionCenterOnXY.x;
+        window.setTimeout(() => {
+            draggedEl.style.top = `${elTopPx}px`;
+            draggedEl.style.left = `${elLeftPx}px`;
+        }, 0);
+    }
     draggedEl.style.margin = "0";
@@ -33,5 +46,5 @@ // we can't have relative or automatic height and width or it will break the illusion
     draggedEl.style.width = `${rect.width}px`;
-    draggedEl.style.transition = `${trs("width")}, ${trs("height")}, ${trs("background-color")}, ${trs("opacity")}, ${trs("color")} `;
+    draggedEl.style.transition = `${trs("top")}, ${trs("left")}, ${trs("background-color")}, ${trs("opacity")}, ${trs("color")} `;
     // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
-    window.setTimeout(() => (draggedEl.style.transition += `, ${trs("top")}, ${trs("left")}`), 0);
+    window.setTimeout(() => (draggedEl.style.transition += `, ${trs("width")}, ${trs("height")}`), 0);
     draggedEl.style.zIndex = "9999";
@@ -38,0 +51,0 @@ draggedEl.style.cursor = "grabbing";

src/pointerAction.js

@@ -310,3 +310,4 @@ import {
         dropTargetClasses: [],
-        transformDraggedElement: () => {}
+        transformDraggedElement: () => {},
+        centreDraggedOnCursor: false
     };
@@ -378,3 +379,3 @@ printDebug(() => [`dndzone good to go options: ${toString(options)}, config: ${toString(config)}`, {node}]);
         originDropZone = originalDragTarget.parentElement;
-        const {items, type} = config;
+        const {items, type, centreDraggedOnCursor} = config;
         draggedElData = {...items[currentIdx]};
@@ -387,3 +388,3 @@ draggedElType = type;
         // creating the draggable element
-        draggedEl = createDraggedElementFrom(originalDragTarget);
+        draggedEl = createDraggedElementFrom(originalDragTarget, centreDraggedOnCursor && currentMousePosition);
         // We will keep the original dom node in the dom because touch events keep firing on it, we want to re-add it after the framework removes it
@@ -431,3 +432,4 @@ function keepOriginalElementInDom() {
         dropTargetClasses = [],
-        transformDraggedElement = () => {}
+        transformDraggedElement = () => {},
+        centreDraggedOnCursor = false
     }) {
@@ -444,2 +446,3 @@ config.dropAnimationDurationMs = dropAnimationDurationMs;
         config.transformDraggedElement = transformDraggedElement;
+        config.centreDraggedOnCursor = centreDraggedOnCursor;
 
@@ -446,0 +449,0 @@ // realtime update for dropTargetStyle

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

264445

increased by1.12%

Lines of code

6190

increased by0.88%

Number of lines in readme file

283

increased by0.35%

No dependency changes