@adaptabletools/adaptable 23.0.10 → 23.0.12

package/src/components/utils/useDraggable.js

@@ -2,29 +2,34 @@ import { useRef, useCallback, useEffect } from 'react';
 function clamp(num, min, max) {
     return num <= min ? min : num >= max ? max : num;
 }
-export default function useDraggable({ onMove, onDrop, getBoundingRect = () => document.body.getBoundingClientRect(), handleSelector, }) {
+const getTranslationBounds = (targetRect, boundingRect) => {
+    const left = boundingRect.x - targetRect.x;
+    const right = left + boundingRect.width - targetRect.width;
+    const top = boundingRect.y - targetRect.y;
+    const bottom = top + boundingRect.height - targetRect.height;
+    return { left, right, top, bottom };
+};
+const applyEdgeOffsetToBoundingRect = (boundingRect, edgeOffset) => {
+    if (!edgeOffset) {
+        return boundingRect;
+    }
+    return new DOMRect(boundingRect.x + edgeOffset, boundingRect.y + edgeOffset, boundingRect.width - 2 * edgeOffset, boundingRect.height - 2 * edgeOffset);
+};
+export default function useDraggable({ onMove, onDrop, getBoundingRect = () => document.body.getBoundingClientRect(), handleSelector, edgeOffset = 0, }) {
     const startRef = useRef(null);
     const handleRef = useRef(null);
     const targetRef = useRef(null);
-    const handleRefCallback = useCallback((newNode) => {
-        const oldNode = handleRef.current;
-        if (oldNode) {
-            oldNode.removeEventListener('mousedown', handleMouseDown);
-        }
-        if (newNode) {
-            newNode.addEventListener('mousedown', handleMouseDown);
-            boundInitialPosition();
-        }
-        handleRef.current = newNode;
-    }, []);
-    useEffect(() => {
-        if (handleSelector) {
-            setTimeout(() => {
-                const node = targetRef?.current?.querySelector(handleSelector);
-                node && handleRefCallback(node);
-            }, 16);
-        }
-    }, [handleSelector]);
+    const onMoveRef = useRef(onMove);
+    const onDropRef = useRef(onDrop);
+    const getBoundingRectRef = useRef(getBoundingRect);
+    const edgeOffsetRef = useRef(edgeOffset);
+    onMoveRef.current = onMove;
+    onDropRef.current = onDrop;
+    getBoundingRectRef.current = getBoundingRect;
+    edgeOffsetRef.current = edgeOffset;
+    const getEffectiveBoundingRect = () => {
+        return applyEdgeOffsetToBoundingRect(getBoundingRectRef.current(), edgeOffsetRef.current);
+    };
     const applyTransform = (dx, dy) => {
         if (!targetRef.current)
             return;
@@ -39,12 +44,19 @@ export default function useDraggable({ onMove, onDrop, getBoundingRect = () => d
             dy: clamp(event.pageY - pageY, bounds.top, bounds.bottom),
         };
     };
-    const getTranslationBounds = (targetRect, boundingRect) => {
-        const left = boundingRect.x - targetRect.x;
-        const right = left + boundingRect.width - targetRect.width;
-        const top = boundingRect.y - targetRect.y;
-        const bottom = top + boundingRect.height - targetRect.height;
-        return { left, right, top, bottom };
+    const handleMouseUp = (event) => {
+        event.preventDefault();
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('mousemove', handleMouseMove);
+        const { dx, dy } = getTranslation(event);
+        applyTransform(0, 0);
+        onDropRef.current?.(dx, dy);
+    };
+    const handleMouseMove = (event) => {
+        event.preventDefault();
+        const { dx, dy } = getTranslation(event);
+        applyTransform(dx, dy);
+        onMoveRef.current?.(event);
     };
     const handleMouseDown = (event) => {
         if (!targetRef.current)
@@ -53,37 +65,48 @@ export default function useDraggable({ onMove, onDrop, getBoundingRect = () => d
         document.addEventListener('mouseup', handleMouseUp);
         document.addEventListener('mousemove', handleMouseMove);
         const targetRect = targetRef.current.getBoundingClientRect();
-        const boundingRect = getBoundingRect();
+        const boundingRect = getEffectiveBoundingRect();
         startRef.current = {
             pageX: event.pageX,
             pageY: event.pageY,
             bounds: getTranslationBounds(targetRect, boundingRect),
         };
     };
-    const handleMouseUp = (event) => {
-        event.preventDefault();
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.removeEventListener('mousemove', handleMouseMove);
-        const { dx, dy } = getTranslation(event);
-        applyTransform(0, 0);
-        onDrop && onDrop(dx, dy);
-    };
-    const handleMouseMove = (event) => {
-        event.preventDefault();
-        const { dx, dy } = getTranslation(event);
-        applyTransform(dx, dy);
-        onMove && onMove(event);
-    };
     const boundInitialPosition = () => {
         if (!targetRef.current)
             return;
         const targetRect = targetRef.current.getBoundingClientRect();
-        const boundingRect = getBoundingRect();
+        const boundingRect = getEffectiveBoundingRect();
         const bounds = getTranslationBounds(targetRect, boundingRect);
         const dx = clamp(0, bounds.left, bounds.right);
         const dy = clamp(0, bounds.top, bounds.bottom);
-        if (onDrop && (dx !== 0 || dy !== 0))
-            onDrop(dx, dy);
+        if (onDropRef.current && (dx !== 0 || dy !== 0)) {
+            onDropRef.current(dx, dy);
+        }
     };
+    const handleMouseDownRef = useRef(handleMouseDown);
+    handleMouseDownRef.current = handleMouseDown;
+    const stableHandleMouseDown = useCallback((event) => {
+        handleMouseDownRef.current(event);
+    }, []);
+    const handleRefCallback = useCallback((newNode) => {
+        const oldNode = handleRef.current;
+        if (oldNode) {
+            oldNode.removeEventListener('mousedown', stableHandleMouseDown);
+        }
+        if (newNode) {
+            newNode.addEventListener('mousedown', stableHandleMouseDown);
+            boundInitialPosition();
+        }
+        handleRef.current = newNode;
+    }, [stableHandleMouseDown]);
+    useEffect(() => {
+        if (handleSelector) {
+            setTimeout(() => {
+                const node = targetRef?.current?.querySelector(handleSelector);
+                node && handleRefCallback(node);
+            }, 16);
+        }
+    }, [handleSelector, handleRefCallback]);
     return { handleRef: handleRefCallback, targetRef, applyTransform };
 }

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1783955510713 || Date.now(),
-    VERSION: "23.0.10" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1784554794411 || Date.now(),
+    VERSION: "23.0.12" || '--current-version--',
 };