draggable-vue-directive - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/draggable.d.ts

 import Vue from "Vue";
 export declare type HandleType = Vue | HTMLElement;
 export interface Position {
+    left: number;
+    top: number;
+}
+export interface PositionDiff {
     x: number;
     y: number;
 }
+export interface MarginOptions {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
 export interface DraggableValue {
     handle?: HandleType;
-    onPositionChange?: (pos: Position) => void;
+    onPositionChange?: (posDiff?: PositionDiff, pos?: Position, event?: MouseEvent) => void;
     resetInitialPos?: boolean;
     stopDragging?: boolean;
     boundingRect?: ClientRect;
+    boundingElement?: HTMLElement;
+    boundingRectMargin?: MarginOptions;
     initialPosition?: Position;
@@ -18,2 +30,8 @@ }
 }
+export interface DraggableState {
+    initialPosition: Position;
+    startDragPosition: Position;
+    currentDragPosition: Position;
+    initialMousePos?: Position;
+}
 export declare const Draggable: {
@@ -20,0 +38,0 @@ bind(el: HTMLElement, binding: DraggableBindings): void;

dist/draggable.js

@@ -10,25 +10,26 @@ "use strict";
 };
+Object.defineProperty(exports, "__esModule", { value: true });
 function extractHandle(handle) {
     return handle && handle.$el || handle;
 }
-function isInBoundries(elementRect, boundingRect, dx, dy) {
-    if (dx === void 0) { dx = 0; }
-    if (dy === void 0) { dy = 0; }
-    if (boundingRect && elementRect) {
-        var actualMaxTop = elementRect.top + elementRect.height + dy;
-        var maxTop = boundingRect.bottom;
-        var actualMinTop = elementRect.top + dy;
-        var minTop = boundingRect.top;
-        var actualMaxLeft = elementRect.left + dx;
-        var maxLeft = boundingRect.right - elementRect.width;
-        var actualMinLeft = elementRect.left + dx;
-        var minLeft = boundingRect.left;
-        if ((actualMaxTop > maxTop && actualMaxTop - dy > maxTop) ||
-            (actualMinTop < minTop && actualMinTop - dy < minTop) ||
-            (actualMaxLeft > maxLeft && actualMaxLeft - dx > maxLeft) ||
-            (actualMinLeft < minLeft && actualMinLeft - dx < minLeft)) {
-            return false;
-        }
+function getPosWithBoundaries(elementRect, boundingRect, left, top, boundingRectMargin) {
+    if (boundingRectMargin === void 0) { boundingRectMargin = {}; }
+    var adjustedPos = { left: left, top: top };
+    var height = elementRect.height, width = elementRect.width;
+    var topRect = top, bottomRect = top + height, leftRect = left, rightRect = left + width;
+    var marginTop = boundingRectMargin.top || 0, marginBottom = boundingRectMargin.bottom || 0, marginLeft = boundingRectMargin.left || 0, marginRight = boundingRectMargin.right || 0;
+    var topBoundary = boundingRect.top + marginTop, bottomBoundary = boundingRect.bottom - marginBottom, leftBoundary = boundingRect.left + marginLeft, rightBoundary = boundingRect.right - marginRight;
+    if (topRect < topBoundary) {
+        adjustedPos.top = topBoundary;
     }
-    return true;
+    else if (bottomRect > bottomBoundary) {
+        adjustedPos.top = bottomBoundary - height;
+    }
+    if (leftRect < leftBoundary) {
+        adjustedPos.left = leftBoundary;
+    }
+    else if (rightRect > rightBoundary) {
+        adjustedPos.left = rightBoundary - width;
+    }
+    return adjustedPos;
 }
@@ -44,23 +45,64 @@ exports.Draggable = {
         var handler = (binding.value && binding.value.handle && extractHandle(binding.value.handle)) || el;
-        init(binding);
+        if (binding && binding.value && binding.value.resetInitialPos) {
+            initializeState();
+            handlePositionChanged();
+        }
+        if (!handler.getAttribute("draggable")) {
+            el.removeEventListener("mousedown", el["listener"]);
+            handler.addEventListener("mousedown", mouseDown);
+            handler.setAttribute("draggable", "true");
+            el["listener"] = mouseDown;
+            initializeState();
+            handlePositionChanged();
+        }
         function mouseMove(event) {
             event.preventDefault();
-            var state = getState();
-            var dx = event.clientX - state.initialMousePos.x;
-            var dy = event.clientY - state.initialMousePos.y;
-            var boundingRect = binding.value && binding.value.boundingRect;
             var stopDragging = binding.value && binding.value.stopDragging;
-            var elementRect = el.getBoundingClientRect();
-            if (!isInBoundries(elementRect, boundingRect, dx, dy) || stopDragging) {
+            if (stopDragging) {
                 return;
             }
-            state.lastPos = {
-                x: state.startPosition.x + dx,
-                y: state.startPosition.y + dy
+            var state = getState();
+            if (!state.startDragPosition || !state.initialMousePos) {
+                initializeState(event);
+                state = getState();
+            }
+            var dx = event.clientX - state.initialMousePos.left;
+            var dy = event.clientY - state.initialMousePos.top;
+            var currentDragPosition = {
+                left: state.startDragPosition.left + dx,
+                top: state.startDragPosition.top + dy
             };
-            setState(state);
-            el.style.transform = "translate(" + state.lastPos.x + "px, " + state.lastPos.y + "px)";
-            onPositionChanged();
+            var boundingRect = getBoundingRect();
+            var elementRect = el.getBoundingClientRect();
+            if (boundingRect && elementRect) {
+                currentDragPosition = getPosWithBoundaries(elementRect, boundingRect, currentDragPosition.left, currentDragPosition.top, binding.value.boundingRectMargin);
+            }
+            setState({ currentDragPosition: currentDragPosition });
+            updateElementStyle();
+            handlePositionChanged(event);
         }
+        function getBoundingRect() {
+            if (!binding.value) {
+                return;
+            }
+            return binding.value.boundingRect
+                || binding.value.boundingElement
+                    && binding.value.boundingElement.getBoundingClientRect();
+        }
+        function updateElementStyle() {
+            var state = getState();
+            if (!state.currentDragPosition) {
+                return;
+            }
+            el.style.position = "fixed";
+            el.style.left = state.currentDragPosition.left + "px";
+            el.style.top = state.currentDragPosition.top + "px";
+        }
         function mouseUp() {
+            var currentRectPosition = getRectPosition();
+            setState({
+                initialMousePos: undefined,
+                startDragPosition: currentRectPosition,
+                currentDragPosition: currentRectPosition
+            });
             document.removeEventListener("mousemove", mouseMove);
@@ -70,7 +112,4 @@ document.removeEventListener("mouseup", mouseUp);
         function mouseDown(event) {
-            var state = getState();
-            state.startPosition = state.lastPos;
-            state.initialMousePos = getInitialMousePosition(event);
-            setState(state);
-            onPositionChanged();
+            setState({ initialMousePos: getInitialMousePosition(event) });
+            handlePositionChanged(event);
             document.addEventListener("mousemove", mouseMove);
@@ -80,43 +119,48 @@ document.addEventListener("mouseup", mouseUp);
         function getInitialMousePosition(event) {
-            return {
-                x: event.clientX,
-                y: event.clientY
+            return event && {
+                left: event.clientX,
+                top: event.clientY
             };
         }
-        function getInitState() {
-            var startPosition = binding && binding.value && binding.value.initialPosition ? binding.value.initialPosition : { x: 0, y: 0 };
-            return {
-                startPosition: startPosition,
-                initialMousePos: { x: 0, y: 0 },
-                lastPos: startPosition
-            };
-        }
-        function init(binding) {
-            if (binding && binding.value && binding.value.resetInitialPos) {
-                setState(getInitState());
-                var state = getState();
-                el.style.transform = "translate(" + state.lastPos.x + "px, " + state.lastPos.y + "px)";
-                onPositionChanged();
+        function getRectPosition() {
+            var clientRect = el.getBoundingClientRect();
+            if (!clientRect.height || !clientRect.width) {
+                return;
             }
-            el.style.position = "absolute";
+            return { left: clientRect.left, top: clientRect.top };
         }
-        function setState(state) {
+        function initializeState(event) {
+            var state = getState();
+            var initialRectPositionFromBinding = binding && binding.value && binding.value.initialPosition;
+            var initialRectPositionFromState = state.initialPosition;
+            var startingDragPosition = getRectPosition();
+            var initialPosition = initialRectPositionFromBinding || initialRectPositionFromState || startingDragPosition;
+            setState({
+                initialPosition: initialPosition,
+                startDragPosition: initialPosition,
+                currentDragPosition: initialPosition,
+                initialMousePos: getInitialMousePosition(event)
+            });
+            updateElementStyle();
+        }
+        function setState(partialState) {
+            var prevState = getState();
+            var state = __assign({}, prevState, partialState);
             handler.setAttribute("draggable-state", JSON.stringify(state));
         }
-        function onPositionChanged() {
+        function handlePositionChanged(event) {
             var state = getState();
-            binding.value && binding.value.onPositionChange && state && binding.value.onPositionChange(__assign({}, state.lastPos));
+            var posDiff = { x: 0, y: 0 };
+            if (state.currentDragPosition && state.startDragPosition) {
+                posDiff.x = state.currentDragPosition.left - state.startDragPosition.left;
+                posDiff.y = state.currentDragPosition.top - state.startDragPosition.top;
+            }
+            var currentPosition = state.currentDragPosition && __assign({}, state.currentDragPosition);
+            binding.value && binding.value.onPositionChange && state && binding.value.onPositionChange(posDiff, currentPosition, event);
         }
         function getState() {
-            return JSON.parse(handler.getAttribute("draggable-state"));
+            return JSON.parse(handler.getAttribute("draggable-state")) || {};
         }
-        if (!handler.getAttribute("draggable")) {
-            el.removeEventListener("mousedown", el["listener"]);
-            handler.addEventListener("mousedown", mouseDown);
-            handler.setAttribute("draggable", "true");
-            el["listener"] = mouseDown;
-            setState(getInitState());
-            onPositionChanged();
-        }
     }
 };
+//# sourceMappingURL=draggable.js.map

dist/index.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var draggable_1 = require("./draggable");
 exports.Draggable = draggable_1.Draggable;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "draggable-vue-directive",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "A simple directive to handle drag and drop of any Vue component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -86,4 +86,4 @@ <h1 align="center">draggable-vue-directive</h1>
 * [boundingRect](#boundingrect)
-
-
+* [boundingElement](#boundingElement)
+* [boundingRectMargin](#boundingRectMargin)
 #### handle
@@ -103,4 +103,3 @@ Type: `HtmlElement | Vue`<br>
 In some cases it is useful to know the coordinates of the element when it's been dragged.<br>
-Passing a callback to `draggableValue` will achieve this goal and every time the element is being dragged the callback
-will be executed with the current position as param.<br>
+Passing a callback to `draggableValue` will achieve this goal and every time the element is being dragged the callback will be executed with 3 params: positionDiff, absolutePosition, event.<br>
 
@@ -122,5 +121,5 @@ ``` js
         methods: {
-            onPosChanged: function(pos) {
-                console.log("left corner", pos.x);
-                console.log("top corner", pos.y);
+            onPosChanged: function(positionDiff, absolutePosition, event) {
+                console.log("left corner", absolutePosition.left);
+                console.log("top corner", absolutePosition.top);
             }
@@ -161,1 +160,18 @@ }
 Constrains dragging to within the bounds of the rectangle.
+
+
+#### boundingElement
+Type: `HtmlElement`<br>
+Required: `false`<br>
+default: `undefined`<br>
+
+Constrains dragging to within the bounds of the element.
+
+
+#### boundingRectMargin
+Type: `MarginOptions`<br>
+Required: `false`<br>
+default: `undefined`<br>
+
+When using boundingRect or boundingElement, you can pass an object with top, left, bottom, right
+properties, to define a margin between the elements and the boundries.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22166

27.94%

Lines of code

205

43.36%

Number of lines in readme file

173

9.49%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes