@hydroperx/drag4react - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/index.d.ts

 import React from "react";
-export default function Draggable(options: DraggableOptions): import("react/jsx-runtime").JSX.Element;
-export type DraggableOptions = {
-    nodeRef: React.MutableRefObject<HTMLElement>;
-    limit?: HTMLElement;
+export default function Draggable(options: {
+    nodeRef: React.MutableRefObject<HTMLElement | null>;
+    limitRef?: React.MutableRefObject<HTMLElement | null>;
     children?: React.ReactNode;
     disabled?: boolean;
-    rem?: number;
     dragStart?: (data: DraggableData) => void;
     dragMove?: (data: DraggableData) => void;
     dragStop?: (data: DraggableData) => void;
-};
+}): import("react/jsx-runtime").JSX.Element;
 export type DraggableData = {
@@ -14,0 +12,0 @@ element: HTMLElement;

dist/index.js

 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import BaseDraggable from "@hydroperx/draggable";
-const at_browser = typeof window !== "undefined";
-let pointerMoveHandlers = [];
-function window_onPointerMove(e) {
-    for (const handler of pointerMoveHandlers) {
-        handler(e);
-    }
-}
-window.addEventListener("pointermove", window_onPointerMove);
-let pointerUpHandlers = [];
-function window_onPointerUp(e) {
-    for (const handler of pointerUpHandlers) {
-        handler(e);
-    }
-}
-window.addEventListener("pointerup", window_onPointerUp);
-window.addEventListener("pointercancel", window_onPointerUp);
 export default function Draggable(options) {
-    let { dragStart: drag_start, dragMove: drag_move, dragStop: drag_stop, limit, nodeRef: el_ref, children, disabled, } = options;
+    let { dragStart: drag_start, dragMove: drag_move, dragStop: drag_stop, limitRef: limit_ref, nodeRef: el_ref, children, disabled, } = options;
     let draggable = null;
-    function createDraggable() {
+    function create_draggable() {
         draggable = new BaseDraggable(el_ref.current, {
-            limit,
+            limit: limit_ref.current ?? undefined,
             onDragStart(element, x, y, event) {
@@ -33,23 +17,2 @@ drag_start?.({ element: element, x, y });
             onDragEnd(element, x, y, event) {
-                /*
-                if (finish_parent)
-                {
-                    if (finish === "translate")
-                    {
-                        const offsets = utils.getElementRelativeOffset(element, finish_parent);
-                        console.log(offsets)
-                        const inset_offsets = utils.extractInsetOffsets(element);
-                        const lefttop_offsets = utils.extractLeftTopOffsets(element);
-                        let x = (offsets.left + inset_offsets.left + lefttop_offsets.left) + "px";
-                        let y = (offsets.top + inset_offsets.top + lefttop_offsets.top) + "px";
-                        if (rem !== undefined)
-                        {
-                            x = ((offsets.left + inset_offsets.left + lefttop_offsets.left) / rem) + "rem";
-                            y = ((offsets.top + inset_offsets.top + lefttop_offsets.top) / rem) + "rem";
-                        }
-                        (element as HTMLElement).style.translate = `${x} ${y}`;
-                        (element as HTMLElement).style.inset = "";
-                    }
-                }
-                */
                 drag_stop?.({ element: element, x, y });
@@ -63,3 +26,3 @@ },
                 draggable.destroy();
-            createDraggable();
+            create_draggable();
         }
@@ -69,5 +32,5 @@ // Cleanup
             if (draggable)
-                draggable.destroy(), draggable = null;
+                draggable.destroy(), (draggable = null);
         };
-    }, [disabled, limit]);
+    }, [disabled]);
     useEffect(() => {
@@ -77,31 +40,6 @@ // Cleanup
             if (draggable)
-                draggable.destroy(), draggable = null;
+                draggable.destroy(), (draggable = null);
         };
     }, []);
-    return (_jsx(_Fragment, { children: children }));
+    return _jsx(_Fragment, { children: children });
 }
-const utils = {
-    extractInsetOffsets(element) {
-        const e = element;
-        const { inset } = e.style;
-        if (!inset)
-            return { left: 0, top: 0 };
-        const m = inset.match(/-?(?:\d*\.\d+|\d+)/g);
-        if (!m)
-            return { left: 0, top: 0 };
-        return {
-            left: parseFloat(m[1]),
-            top: parseFloat(m[0]),
-        };
-    },
-    extractLeftTopOffsets(element) {
-        const e = element;
-        const { left, top } = e.style;
-        const m_top = top ? top.match(/-?(?:\d*\.\d+|\d+)/) : "0";
-        const m_left = left ? left.match(/-?(?:\d*\.\d+|\d+)/) : "0";
-        return {
-            left: parseFloat(m_left ? m_left[0] : "0"),
-            top: parseFloat(m_top ? m_top[0] : "0"),
-        };
-    },
-};

package.json

 {
   "name": "@hydroperx/drag4react",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "type": "module",
@@ -8,2 +8,3 @@ "files": ["/dist"],
     "build": "tsc",
+    "watch": "tsc --watch",
     "prepublishOnly": "npm run build"
@@ -22,3 +23,3 @@ },
     "type": "git",
-    "url": "https://github.com/hydroperx/drag4react.git"
+    "url": "https://github.com/hydroperx/drag4react.js.git"
   },
@@ -25,0 +26,0 @@ "peerDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

14806

-13.96%

Lines of code

56

-53.33%

No dependency changes