react-edge-dock 1.0.4 → 1.0.6

package/README.md

@@ -129,4 +129,4 @@ export default function MyComponent() {
 
 ## API
 
-See the [example.tsx](./example.tsx) file for more detailed usage examples.
+See the [example.tsx](https://github.com/Shivampatel07/react-edge-dock/blob/master/example.tsx) file for more detailed usage examples.

package/dist/useEdgeDock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAkLjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAgV1E"}
+{"version":3,"file":"useEdgeDock.d.ts","sourceRoot":"","sources":["../src/useEdgeDock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EAId,iBAAiB,EAIlB,MAAM,SAAS,CAAC;AAwLjB;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,cAAmB,GAAG,iBAAiB,CAgV1E"}

package/dist/useEdgeDock.js

@@ -76,14 +76,18 @@ function snapToEdge(pos, edge, viewport, buttonDimensions, edgeOffset) {
     }
 }
 /**
- * Constrain position within viewport bounds
+ * Constrain position within viewport bounds, respecting edge offsets
  */
-function constrainToViewport(pos, viewport, buttonDimensions) {
+function constrainToViewport(pos, viewport, buttonDimensions, edgeOffset) {
     const halfWidth = buttonDimensions.width / 2;
     const halfHeight = buttonDimensions.height / 2;
+    const leftOffset = getOffsetForEdge(edgeOffset, 'left');
+    const rightOffset = getOffsetForEdge(edgeOffset, 'right');
+    const topOffset = getOffsetForEdge(edgeOffset, 'top');
+    const bottomOffset = getOffsetForEdge(edgeOffset, 'bottom');
     return {
-        x: Math.max(halfWidth, Math.min(viewport.width - halfWidth, pos.x)),
-        y: Math.max(halfHeight, Math.min(viewport.height - halfHeight, pos.y)),
+        x: Math.max(halfWidth + leftOffset, Math.min(viewport.width - halfWidth - rightOffset, pos.x)),
+        y: Math.max(halfHeight + topOffset, Math.min(viewport.height - halfHeight - bottomOffset, pos.y)),
     };
 }
 /**
@@ -178,7 +182,7 @@ export function useEdgeDock(config = {}) {
             const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
             // Set initial position on client after mount
             let initialPos = { x: viewport.width - 60, y: viewport.height - 60 };
-            initialPos = constrainToViewport(initialPos, viewport, buttonDimensions);
+            initialPos = constrainToViewport(initialPos, viewport, buttonDimensions, edgeOffset);
             if (dockMode === 'auto') {
                 const edge = getClosestEdge(initialPos, viewport, allowedEdges);
                 initialPos = snapToEdge(initialPos, edge, viewport, buttonDimensions, edgeOffset);
@@ -220,7 +224,7 @@ export function useEdgeDock(config = {}) {
         const buttonRect = buttonRef.current.getBoundingClientRect();
         const viewport = getViewport();
         const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
-        let finalPos = constrainToViewport(newPos, viewport, buttonDimensions);
+        let finalPos = constrainToViewport(newPos, viewport, buttonDimensions, edgeOffset);
         if (dockMode === 'auto') {
             const edge = getClosestEdge(finalPos, viewport, allowedEdges);
             finalPos = snapToEdge(finalPos, edge, viewport, buttonDimensions, edgeOffset);
@@ -297,7 +301,7 @@ export function useEdgeDock(config = {}) {
             const viewport = { width: window.innerWidth, height: window.innerHeight };
             const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
             // During drag, only constrain to viewport (no snapping)
-            const constrainedPos = constrainToViewport(newPos, viewport, buttonDimensions);
+            const constrainedPos = constrainToViewport(newPos, viewport, buttonDimensions, edgeOffset);
             setPositionInternal(constrainedPos);
         };
         const handlePointerUp = () => {
@@ -352,7 +356,7 @@ export function useEdgeDock(config = {}) {
                 const buttonRect = buttonRef.current.getBoundingClientRect();
                 const viewport = getViewport();
                 const buttonDimensions = { width: buttonRect.width, height: buttonRect.height };
-                let newPos = constrainToViewport(position, viewport, buttonDimensions);
+                let newPos = constrainToViewport(position, viewport, buttonDimensions, edgeOffset);
                 if (dockMode === 'auto') {
                     const edge = getClosestEdge(newPos, viewport, allowedEdges);
                     newPos = snapToEdge(newPos, edge, viewport, buttonDimensions, edgeOffset);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edge-dock",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A zero-dependency React TypeScript library for customizable draggable edge-docked floating buttons with popup support",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -11,12 +11,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/react-edge-dock.git"
+    "url": "https://github.com/Shivampatel07/react-edge-dock"
   },
   "bugs": {
-    "url": "https://github.com/yourusername/react-edge-dock/issues"
+    "url": "https://github.com/Shivampatel07/react-edge-dock/issues"
   },
-  "homepage": "https://github.com/yourusername/react-edge-dock#readme",
+  "homepage": "https://github.com/Shivampatel07/react-edge-dock#readme",
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",