react-edge-dock 1.0.3 → 1.0.5

package/README.md

@@ -65,7 +65,7 @@ export default function MyComponent() {
 - `dockMode`: `"free"` | `"auto"` | `"manual"` - Docking behavior
 - `dockEdge`: `"left"` | `"right"` | `"top"` | `"bottom"` - Fixed edge (manual mode)
 - `allowedEdges`: `DockEdge[]` - Restrict docking to specific edges (e.g., `['left', 'right']` for horizontal only)
-- `edgeOffset`: `number` - Gap from screen edge in pixels (default: 0)
+- `edgeOffset`: `number | { left?: number; right?: number; top?: number; bottom?: number }` - Gap from edges in pixels
 - `animation`: `boolean` - Enable snap animations
 - `popupGap`: `number` - Gap between button and popup
 - `position`: `{ x: number; y: number }` - Initial/controlled position
@@ -75,13 +75,33 @@ export default function MyComponent() {
 
 ## Examples
 
+### Same offset for all edges
+
+```tsx
+<EdgeDock
+  dockMode="auto"
+  edgeOffset={16}
+  button={<button>🚀</button>}
+/>
+```
+
+### Different offset for each edge
+
+```tsx
+<EdgeDock
+  dockMode="auto"
+  edgeOffset={{ left: 10, right: 20, top: 15, bottom: 25 }}
+  button={<button>🎯</button>}
+/>
+```
+
 ### Restrict to horizontal edges only (left/right)
 
 ```tsx
 <EdgeDock
   dockMode="auto"
   allowedEdges={['left', 'right']}
-  edgeOffset={16}
+  edgeOffset={{ left: 16, right: 24 }}
   button={<button>📱</button>}
 />
 ```
@@ -102,7 +122,7 @@ export default function MyComponent() {
 <EdgeDock
   dockMode="manual"
   dockEdge="right"
-  edgeOffset={20}
+  edgeOffset={{ right: 20 }}
   button={<button>➡️</button>}
 />
 ```

package/dist/types.d.ts

@@ -27,6 +27,15 @@ export interface DockState {
     /** Whether the popup is currently open */
     isPopupOpen: boolean;
 }
+/**
+ * Edge offset configuration - can be a single number for all edges or individual values
+ */
+export type EdgeOffset = number | {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+};
 /**
  * Configuration for EdgeDock component
  */
@@ -43,8 +52,8 @@ export interface EdgeDockConfig {
     animation?: boolean;
     /** Gap between button and popup in pixels */
     popupGap?: number;
-    /** Offset from edge when docked (in pixels) */
-    edgeOffset?: number;
+    /** Offset from edge when docked - number for all edges or object for individual edges */
+    edgeOffset?: EdgeOffset;
     /** z-index for the dock container */
     zIndex?: number;
     /** Callback when dock state changes */

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

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,EAGlB,MAAM,SAAS,CAAC;AAwKjB;;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

@@ -12,6 +12,16 @@ function getViewport() {
     }
     return { width: window.innerWidth, height: window.innerHeight };
 }
+/**
+ * Get offset value for a specific edge
+ */
+function getOffsetForEdge(edgeOffset, edge) {
+    if (!edgeOffset)
+        return 0;
+    if (typeof edgeOffset === 'number')
+        return edgeOffset;
+    return edgeOffset[edge] ?? 0;
+}
 /**
  * Calculate which edge is closest to the given position
  */
@@ -38,9 +48,10 @@ function getClosestEdge(pos, viewport, allowedEdges) {
 /**
  * Snap position to edge based on dock mode
  */
-function snapToEdge(pos, edge, viewport, buttonDimensions, offset = 0) {
+function snapToEdge(pos, edge, viewport, buttonDimensions, edgeOffset) {
     const halfWidth = buttonDimensions.width / 2;
     const halfHeight = buttonDimensions.height / 2;
+    const offset = getOffsetForEdge(edgeOffset, edge);
     switch (edge) {
         case 'left':
             return {
@@ -65,14 +76,18 @@ function snapToEdge(pos, edge, viewport, buttonDimensions, offset = 0) {
     }
 }
 /**
- * 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)),
     };
 }
 /**
@@ -128,7 +143,7 @@ function calculatePopupPosition(buttonPos, buttonDimensions, popupDimensions, vi
  * Main hook for edge dock functionality
  */
 export function useEdgeDock(config = {}) {
-    const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset = 0, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, } = config;
+    const { dockMode = 'auto', dockEdge, allowedEdges, position: controlledPosition, animation = true, popupGap = 12, edgeOffset, zIndex = 9999, onDockChange, isPopupOpen: controlledPopupOpen, onPopupChange, } = config;
     const buttonRef = useRef(null);
     const popupRef = useRef(null);
     const isMountedRef = useRef(false);
@@ -167,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);
@@ -209,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);
@@ -286,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 = () => {
@@ -341,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.3",
+  "version": "1.0.5",
   "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",