svelte-movable - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/index.js

@@ -1,9 +0,255 @@
-// Copyright (c) Quang Phan. All rights reserved. Licensed under the MIT license.
 /**
- * svelte action - `use:movable` move node on mousedown
+ * @internal
  *
- * @packageDocumentation
+ * @param delta - MovableLimit to normalize
+ * @returns
  */
-export { movable } from './movable';
-export * from './types';
-//# sourceMappingURL=index.js.map
+function normalizeDelta(delta) {
+    var x = { unit: 'px', value: 0 };
+    var y = { unit: 'px', value: 0 };
+    var extractUnit = function (text, axis) {
+        var unit = text.slice(-1);
+        if (unit !== '%' && unit !== 'px') {
+            throw new Error("Invalid delta ".concat(axis !== null && axis !== void 0 ? axis : '', " unit. Only 'px' and '%' are supported."));
+        }
+        return unit;
+    };
+    if (delta) {
+        if (typeof delta === 'string') {
+            x.unit = y.unit = extractUnit(delta);
+            x.value = y.value = parseInt(delta, 10);
+            x.value = y.value = parseInt(delta.slice(0, -1));
+        }
+        else {
+            x.unit = extractUnit(delta.x, 'x');
+            x.value = parseInt(delta.x.slice(0, -1));
+            y.unit = extractUnit(delta.y, 'y');
+            y.value = parseInt(delta.y.slice(0, -1));
+        }
+    }
+    return { x: x, y: y };
+}
+
+/**
+ *
+ * @internal
+ *
+ * @param node
+ * @param parameters
+ * @returns
+ */
+function input(node, parameters) {
+    var _a, _b, _c, _d, _e;
+    return {
+        enabled: (_a = parameters.enabled) !== null && _a !== void 0 ? _a : true,
+        parent: (_b = parameters.limit) === null || _b === void 0 ? void 0 : _b.parent,
+        normalizedDelta: normalizeDelta((_c = parameters.limit) === null || _c === void 0 ? void 0 : _c.delta),
+        cache: (_d = parameters.cache) !== null && _d !== void 0 ? _d : 'none',
+        trigger: (_e = parameters.trigger) !== null && _e !== void 0 ? _e : node,
+    };
+}
+
+/**
+ * Trigger node displacement on mousedown (via position.left & position.top)
+ * @public
+ *
+ * @param node - HTMLElement to be moved
+ * @param parameters - svelte action parameters
+ * @returns svelte action interface
+ *
+ * @remarks
+ *
+ * `movable` should be use with element not svelte component
+ *
+ * ```svelte
+ * <-- correct usage-->
+ *  <div use:movable />
+ *
+ * <-- incorrect usage-->
+ * <Component use:movable/>
+ * ```
+ *
+ * @example Typical usage
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import arrows from 'svelte-awesome/icons/arrows';
+ *   import Icon from 'svelte-awesome/components/Icon.svelte';
+ *
+ *   let modal = false;
+ *   let triggerNode: HTMLElement;
+ * </script>
+ *
+ * <container>
+ *   <!-- ... some other content ... -->
+ *
+ *   {#if modal}
+ *     <div
+ *       transition:fade={{ duration: 200 }}
+ *       class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-full max-w-sm"
+ *       use:movable={{
+ *         limit: {
+ *           delta: '20%',
+ *           parent: containerNode,
+ *         },
+ *         trigger: triggerNode,
+ *       }}
+ *       on:movablestart={() => console.log('movable:start')}
+ *       on:movableend={() => console.log('movable:end')}
+ *     >
+ *       <button
+ *         bind:this={triggerNode}
+ *         class="c-btn-icon absolute top-2 right-10 hover:cursor-move"
+ *       >
+ *         <Icon data={arrows} />
+ *       </button>
+ *
+ *       <!-- ... some other modal content ... -->
+ *     </div>
+ * {/if}
+ *
+ * </container>
+ * ```
+ *
+ */
+function movable(node, parameters) {
+    if (parameters === void 0) { parameters = { enabled: true, cache: 'none' }; }
+    var _a = input(node, parameters), parent = _a.parent, normalizedDelta = _a.normalizedDelta, trigger = _a.trigger, enabled = _a.enabled;
+    var lastMouseCoordinates = { x: 0, y: 0 };
+    var lastNodeCoordinates = { top: 0, left: 0 };
+    var ΣΔx = 0; // total displacement in x-axis
+    var ΣΔy = 0; // total displacement in y-axis
+    var updateLastMouseCoordinates = function (event) {
+        lastMouseCoordinates.x = event.clientX;
+        lastMouseCoordinates.y = event.clientY;
+    };
+    var updateLastNodeCoordinates = function (_a) {
+        var top = _a.top, left = _a.left;
+        lastNodeCoordinates.top = top;
+        lastNodeCoordinates.left = left;
+    };
+    var onMouseMove = function (event) {
+        var Δx = event.clientX - lastMouseCoordinates.x;
+        var Δy = event.clientY - lastMouseCoordinates.y;
+        updateLastMouseCoordinates(event);
+        var top = lastNodeCoordinates.top + Δy;
+        var left = lastNodeCoordinates.left + Δx;
+        var nodeBoundingRect = node.getBoundingClientRect();
+        var boundX = 0;
+        switch (normalizedDelta.x.unit) {
+            case '%':
+                boundX = (normalizedDelta.x.value * nodeBoundingRect.width) / 100;
+                break;
+            case 'px':
+                boundX = normalizedDelta.x.value;
+                break;
+        }
+        var boundY = 0;
+        switch (normalizedDelta.y.unit) {
+            case '%':
+                boundY = (normalizedDelta.y.value * nodeBoundingRect.height) / 100;
+                break;
+            case 'px':
+                boundY = normalizedDelta.y.value;
+                break;
+        }
+        if (parent) {
+            var insideBoundingRect = parent.getBoundingClientRect();
+            var newAbsTop = nodeBoundingRect.top + Δy + boundY;
+            if (newAbsTop < insideBoundingRect.top) {
+                top += insideBoundingRect.top - newAbsTop;
+            }
+            else {
+                var newAbsBottom = nodeBoundingRect.bottom + Δy - boundY;
+                if (newAbsBottom > insideBoundingRect.bottom) {
+                    top -= newAbsBottom - insideBoundingRect.bottom;
+                }
+            }
+            var newAbsLeft = nodeBoundingRect.left + Δx + boundX;
+            if (newAbsLeft < insideBoundingRect.left) {
+                left += insideBoundingRect.left - newAbsLeft;
+            }
+            else {
+                var newAbsRight = nodeBoundingRect.right + Δx - boundX;
+                if (newAbsRight > insideBoundingRect.right) {
+                    left -= newAbsRight - insideBoundingRect.right;
+                }
+            }
+        }
+        else {
+            if (boundX > 0) {
+                var newΣΔx = ΣΔx + left - lastNodeCoordinates.left;
+                if (newΣΔx > boundX) {
+                    left -= newΣΔx - boundX;
+                }
+                else if (newΣΔx < -boundX) {
+                    left -= newΣΔx + boundX;
+                }
+            }
+            if (boundY > 0) {
+                var newΣΔy = ΣΔy + top - lastNodeCoordinates.top;
+                if (newΣΔy > boundY) {
+                    top -= newΣΔy - boundY;
+                }
+                else if (newΣΔy < -boundY) {
+                    top -= newΣΔy + boundY;
+                }
+            }
+        }
+        node.style.left = "".concat(left, "px");
+        node.style.top = "".concat(top, "px");
+        ΣΔx += left - lastNodeCoordinates.left;
+        ΣΔy += top - lastNodeCoordinates.top;
+        updateLastNodeCoordinates({ top: top, left: left });
+    };
+    var end = function () {
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', end);
+        node.dispatchEvent(new CustomEvent('movableend', { detail: node }));
+    };
+    var onMouseDown = function (event) {
+        var _a, _b, _c, _d;
+        node.dispatchEvent(new CustomEvent('movablestart', { detail: node }));
+        var computedStyles = getComputedStyle(node);
+        // init coordinates
+        var regex = '^[-0-9]+';
+        var left = parseInt((_b = (_a = computedStyles.getPropertyValue('left').match(regex)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '0');
+        var top = parseInt((_d = (_c = computedStyles.getPropertyValue('top').match(regex)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : '0');
+        updateLastNodeCoordinates({ left: left, top: top });
+        // init position style
+        var position = computedStyles.getPropertyValue('position');
+        if (position !== 'relative' && position !== 'absolute') {
+            node.style.position = 'relative';
+        }
+        updateLastMouseCoordinates(event);
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = 'move';
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', end);
+    };
+    if (enabled) {
+        trigger.addEventListener('mousedown', onMouseDown, true);
+    }
+    return {
+        update: function (parameters) {
+            var update = input(node, parameters);
+            trigger.removeEventListener('mousedown', onMouseDown, true);
+            update.trigger.addEventListener('mousedown', onMouseDown, true);
+            if (!enabled && update.enabled) {
+                trigger.addEventListener('mousedown', onMouseDown, true);
+            }
+            else if (enabled && !update.enabled) {
+                trigger.removeEventListener('mousedown', onMouseDown, true);
+            }
+            (parent = update.parent, normalizedDelta = update.normalizedDelta, trigger = update.trigger, enabled = update.enabled);
+        },
+        destroy: function () {
+            trigger.removeEventListener('mousedown', onMouseDown, true);
+        },
+    };
+}
+
+export { movable };
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "svelte-movable",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Action to move node on mousedown",
   "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "type": "module",
@@ -16,3 +18,3 @@ "publishConfig": {
     "format": "prettier --check --config ./prettierrc.yaml .",
-    "build": "tsc --project tsconfig.json",
+    "build": "rollup -c",
     "semantic-release": "semantic-release",
@@ -47,2 +49,3 @@ "api:extract": "api-extractor run --local --verbose",
     "@microsoft/api-extractor": "^7.23.1",
+    "@rollup/plugin-typescript": "^8.3.2",
     "@semantic-release/changelog": "^6.0.1",
@@ -62,2 +65,4 @@ "@semantic-release/commit-analyzer": "^9.0.2",
     "prettier": "^2.6.2",
+    "rollup": "^2.72.1",
+    "rollup-plugin-filesize": "^9.1.2",
     "semantic-release": "^19.0.2",
@@ -64,0 +69,0 @@ "tslib": "^2.4.0",

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

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

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

Worsened metrics

Total package byte prevSize

33955

decreased by-0.81%

Dev dependency count

22

increased by15.79%

Number of package files

21

decreased by-40%

Lines of code

488

decreased by-2.2%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes