@lincle/react-native-interactive 0.4.0-next.2 → 0.4.0-next.3

package/dist/base.d.ts

@@ -1 +1 @@
-export { Edge, Edges, Graph, GraphContexts, Grid, Node, Nodes, Path } from '@lincle/react-native-base';
+export { Edge, Edges, Graph, Grid, Node, Nodes, Path } from '@lincle/react-native-base';

package/dist/base.js

@@ -1 +1 @@
-export { Edge, Edges, Graph, GraphContexts, Grid, Node, Nodes, Path } from '@lincle/react-native-base';
+export { Edge, Edges, Graph, Grid, Node, Nodes, Path } from '@lincle/react-native-base';

package/dist/components/Edge/Path/index.d.ts

@@ -0,0 +1 @@
+export { Path } from '../../../base';

package/dist/components/Edge/Path/index.js

@@ -0,0 +1 @@
+export { Path } from '../../../base';

package/dist/components/Edge/index.d.ts

@@ -1 +1,2 @@
-export { Edge as default } from '../../base';
+export { Edge } from '../../base';
+export { Path } from './Path';

package/dist/components/Edge/index.js

@@ -1 +1,2 @@
-export { Edge as default } from '../../base';
+export { Edge } from '../../base';
+export { Path } from './Path';

package/dist/components/Edges/Connections/index.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent, type PropsWithChildren } from 'react';
+declare const Connections: FunctionComponent<ConnectionsProps>;
+export default Connections;
+export type ConnectionsProps = PropsWithChildren<{
+    readonly scale: number;
+    readonly translate: {
+        x: number;
+        y: number;
+    };
+}>;

package/dist/components/Edges/Connections/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Marker, useConnections } from '../../../shared';
+import { Path } from '../../Edge';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { Defs, Svg } from 'react-native-svg';
+const { svgStyle } = StyleSheet.create({
+    svgStyle: {
+        bottom: 0,
+        height: '100%',
+        left: 0,
+        overflow: 'visible',
+        pointerEvents: 'none',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: '100%'
+    }
+});
+const Connections = ({ scale = 1, translate = {
+    x: 0,
+    y: 0
+} }) => {
+    const connections = useConnections();
+    const paths = useMemo(() => {
+        return Object.keys(connections).map((sourceId) => {
+            const { line, source, target } = connections[sourceId];
+            return (_jsx(Path, { edgeId: sourceId + 'temp', line: line, source: source, target: target }, sourceId));
+        });
+    }, [
+        connections
+    ]);
+    const translateXYZ = useMemo(() => {
+        const tx = translate.x;
+        const ty = translate.y;
+        const tz = scale;
+        return `translate(${tx}, ${ty}) scale(${tz})`;
+    }, [
+        translate.x,
+        translate.y,
+        scale
+    ]);
+    return (_jsxs(Svg, { style: svgStyle, transform: translateXYZ, children: [_jsx(Defs, { children: _jsx(Marker, {}) }), paths] }));
+};
+Connections.displayName = 'LincleInteractiveConnections';
+export default Connections;

package/dist/components/Edges/index.d.ts

@@ -1 +1,4 @@
-export { Edges as default } from '../../base';
+import { type EdgesProps } from '../../shared';
+import { type FunctionComponent } from 'react';
+declare const Edges: FunctionComponent<EdgesProps>;
+export { Edges };

package/dist/components/Edges/index.js

@@ -1 +1,23 @@
-export { Edges as default } from '../../base';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Edges as BaseEdges } from '../../base';
+import { useScale, useTranslate } from '../../shared';
+import Connections from './Connections';
+const Edges = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const scale = useScale();
+    const translate = useTranslate();
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdges, Object.assign({ scale: scale, translate: translate }, props, { children: children })), _jsx(Connections, { scale: scale, translate: translate })] }));
+};
+Edges.displayName = 'LincleInteractiveEdges';
+export { Edges };

package/dist/components/{Grid → Graph/Grid}/index.d.ts

@@ -1,4 +1,4 @@
-import { type GridProps } from '../../shared';
+import { type GridProps } from '../../../shared';
 import { type FunctionComponent } from 'react';
 declare const Grid: FunctionComponent<GridProps>;
 export default Grid;

package/dist/components/Graph/Grid/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid as GridBase } from '../../../base';
+import { useMode, useScale, useTranslate } from '../../../shared';
+import { useMemo } from 'react';
+import { Circle, Line } from 'react-native-svg';
+const WIDTH = 0.4;
+const Grid = ({ children }) => {
+    const scale = useScale();
+    const translate = useTranslate();
+    const mode = useMode();
+    const line = useMemo(() => {
+        const t1 = 1 + scale;
+        const t2 = 4 * scale;
+        return (_jsx(Line, { stroke: 'black', strokeWidth: WIDTH, x1: t1, x2: t2, y1: t1, y2: t2 }));
+    }, [
+        scale
+    ]);
+    const plus = useMemo(() => {
+        const t1 = scale;
+        const t2 = 4 * scale;
+        return (_jsxs(_Fragment, { children: [_jsx(Line, { stroke: 'black', strokeWidth: WIDTH, x1: t1, x2: t2, y1: t2, y2: t2 }), _jsx(Line, { stroke: 'black', strokeWidth: WIDTH, x1: t2, x2: t2, y1: t1, y2: t2 })] }));
+    }, [
+        scale
+    ]);
+    const circle = useMemo(() => {
+        const t2 = 4 * scale;
+        return (_jsx(Circle, { cx: t2, cy: t2, fill: 'black', r: WIDTH }));
+    }, [
+        scale
+    ]);
+    const child = useMemo(() => {
+        if (!children) {
+            switch (mode) {
+                case 'pull': {
+                    return line;
+                }
+                case 'select': {
+                    return plus;
+                }
+                case 'move': {
+                    return circle;
+                }
+            }
+        }
+        return children;
+    }, [
+        children,
+        circle,
+        line,
+        mode,
+        plus
+    ]);
+    return (_jsx(GridBase, { scale: scale, xOffset: translate.x, yOffset: translate.y, children: child }));
+};
+Grid.displayName = 'LincleInteractiveGrid';
+export default Grid;

package/dist/components/Graph/index.d.ts

@@ -1,4 +1,4 @@
 import { type GraphProps } from '../../shared';
 import { type FunctionComponent } from 'react';
 declare const Graph: FunctionComponent<GraphProps>;
-export default Graph;
+export { Graph };

package/dist/components/Graph/index.js

@@ -1,13 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Graph as WrappedGraph } from '../../base';
-import GraphContexts from '../GraphContexts';
-import Interaction from '../Interaction';
-const Graph = ({ children, disableMove, disablePan, disablePull, disableScale, edgeFrequency, grid, id, line, maxScale, minScale, mode: givenMode, nodeFrequency, nodeHeight, nodeWidth, onEdgeDrop, onMouseDown, onMouseUp, onNodeDrag, onNodeSelect, onNodeStart, onNodeStop, onScale, onTouchEnd, onTouchStart, onTranslate, scale, shape, snap, xOffset, yOffset }) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GraphBase, Providers } from '../../shared';
+import Grid from './Grid';
+const Graph = ({ children, edgeFrequency, grid, id, line, maxScale, minScale, mode, move, nodeFrequency, nodeHeight, nodeWidth, onNodeDrag, onNodeEdgeDrop, onNodeSelect, onNodeStart, onNodeStop, onScale, onTranslate, pan, pull, scale, shape, showGrid, snap, translate, zoom }) => {
     if (!id) {
         console.error('No ID provided to @lincle/interactive Graph!');
         return null;
     }
-    return (_jsx(GraphContexts, { disableMove: disableMove, disablePan: disablePan, disablePull: disablePull, disableScale: disableScale, edgeFrequency: edgeFrequency, grid: grid, id: id !== null && id !== void 0 ? id : 0, line: line, maxScale: maxScale, minScale: minScale, mode: givenMode, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, onEdgeDrop: onEdgeDrop, onNodeDrag: onNodeDrag, onNodeSelect: onNodeSelect, onNodeStart: onNodeStart, onNodeStop: onNodeStop, onScale: onScale, onTranslate: onTranslate, scale: scale, shape: shape, snap: snap, xOffset: xOffset, yOffset: yOffset, children: _jsx(WrappedGraph, { grid: false, id: id, children: _jsx(Interaction, { onMouseDown: onMouseDown, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart, children: children }) }) }));
+    const gird = showGrid === false ?
+        null :
+        _jsx(Grid, {});
+    return (_jsx(GraphBase, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, showGrid: false, children: _jsxs(Providers, { maxScale: maxScale, minScale: minScale, mode: mode, move: move, onNodeDrag: onNodeDrag, onNodeEdgeDrop: onNodeEdgeDrop, onNodeSelect: onNodeSelect, onNodeStart: onNodeStart, onNodeStop: onNodeStop, onScale: onScale, onTranslate: onTranslate, pan: pan, pull: pull, scale: scale, snap: snap, translate: translate, zoom: zoom, children: [gird, children] }) }));
 };
 Graph.displayName = 'LincleInteractiveGraph';
-export default Graph;
+export { Graph };

package/dist/components/Interaction/index.d.ts

@@ -1,4 +1,4 @@
 import { type InteractionProps } from '../../shared';
 import { type FunctionComponent } from 'react';
 declare const Interaction: FunctionComponent<InteractionProps>;
-export default Interaction;
+export { Interaction };

package/dist/components/Interaction/index.js

@@ -1,17 +1,134 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMode, useOnMode, useOnScale, useOnTranslateThrottle, useScale, useTranslate } from '../../shared';
 import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
-import { View } from 'react-native';
-const styles = {
+import { Children, useCallback, useEffect, useMemo, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+const CLICK_TIME = 500;
+const useDoubleTap = () => {
+    const timer = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+                timer.current = null;
+            }
+        };
+    }, []);
+    return useCallback((callback, threshold = CLICK_TIME) => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+            return callback();
+        }
+        else {
+            timer.current = setTimeout(() => {
+                timer.current = null;
+            }, threshold);
+            return;
+        }
+    }, []);
+};
+const styles = StyleSheet.create({
     container: {
         height: '100%',
-        overflow: 'hidden'
+        overflow: 'visible'
     },
     content: {
+        height: '100%',
+        position: 'absolute',
+        width: '100%'
+    },
+    zoomable: {
         overflow: 'visible'
     }
-};
-const Interaction = ({ children }) => {
-    return (_jsx(View, { style: styles.container, children: _jsx(ReactNativeZoomableView, { bindToBorders: false, initialZoom: 1, maxZoom: 1.5, minZoom: 0.5, style: styles.content, zoomStep: 0.5, children: children }) }));
+});
+const Interaction = ({ children, onPointerUp }) => {
+    const scale = useScale();
+    const translate = useTranslate();
+    const onScale = useOnScale();
+    const onTranslateThrottle = useOnTranslateThrottle();
+    const graphMode = useMode();
+    const onMode = useOnMode();
+    const handleDoubleTap = useDoubleTap();
+    const handleOnTransform = useCallback((event) => {
+        const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = event;
+        onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
+    }, [
+        onTranslateThrottle
+    ]);
+    const handleZoom = useCallback((event, gestureState, zoomableViewEventObject) => {
+        const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = zoomableViewEventObject;
+        onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
+        if (onScale) {
+            onScale(zoomLevel);
+        }
+    }, [
+        onScale,
+        onTranslateThrottle
+    ]);
+    const { edges, nodes } = useMemo(() => {
+        const filteredChildren = Children.toArray(children).filter((child) => {
+            var _a;
+            const name = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName;
+            return name === 'LincleInteractiveNodes' ||
+                'LincleInteractiveEdges';
+        });
+        const filteredNodes = filteredChildren.filter((child) => {
+            var _a;
+            const name = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName;
+            return name === 'LincleInteractiveNodes';
+        });
+        const filteredEdges = filteredChildren.filter((child) => {
+            var _a;
+            const name = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName;
+            return name === 'LincleInteractiveEdges';
+        });
+        return {
+            edges: filteredEdges,
+            nodes: filteredNodes
+        };
+    }, [
+        children
+    ]);
+    const handleTapEnd = useCallback(() => {
+        if (onMode) {
+            switch (graphMode) {
+                case 'move': {
+                    return handleDoubleTap(() => {
+                        onMode('pull');
+                    });
+                }
+                case 'pull': {
+                    return handleDoubleTap(() => {
+                        onMode('select');
+                    });
+                }
+                case 'select':
+                default: {
+                    return handleDoubleTap(() => {
+                        onMode('move');
+                    });
+                }
+            }
+        }
+        else {
+            return;
+        }
+    }, [
+        graphMode,
+        handleDoubleTap,
+        onMode
+    ]);
+    const handlePointerUp = useCallback((event) => {
+        handleTapEnd();
+        if (onPointerUp) {
+            onPointerUp(event);
+        }
+    }, [
+        handleTapEnd,
+        onPointerUp
+    ]);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(ReactNativeZoomableView, { bindToBorders: false, doubleTapDelay: 1, doubleTapZoomToCenter: false, initialOffsetX: translate.x, initialOffsetY: translate.y, initialZoom: scale, maxZoom: 1.5, minZoom: 0.5, movementSensibility: 1, onSingleTap: handlePointerUp, onTransform: handleOnTransform, onZoomAfter: handleZoom, panEnabled: true, style: styles.zoomable, visualTouchFeedbackEnabled: false, zoomStep: 0.5, children: nodes }), _jsx(View, { style: styles.content, children: edges })] }));
 };
 Interaction.displayName = 'LincleInteractiveInteraction';
-export default Interaction;
+export { Interaction };

package/dist/components/Node/Draggable.d.ts

@@ -0,0 +1,41 @@
+import React, { type FunctionComponent } from 'react';
+import { type GestureResponderEvent, type PanResponderGestureState } from 'react-native';
+declare const Draggable: FunctionComponent<IProps>;
+export default Draggable;
+type IProps = {
+    readonly animatedViewProps?: object;
+    readonly children?: React.ReactNode;
+    readonly debug?: boolean;
+    readonly disabled?: boolean;
+    readonly imageSource?: number;
+    readonly isCircle?: boolean;
+    readonly maxX?: number;
+    readonly maxY?: number;
+    readonly minX?: number;
+    readonly minY?: number;
+    readonly onDrag?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => void;
+    readonly onDragRelease?: (event: GestureResponderEvent, gestureState: PanResponderGestureState, bounds: {
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+    }) => void;
+    readonly onLongPress?: (event: GestureResponderEvent) => void;
+    readonly onPressIn?: (event: GestureResponderEvent) => void;
+    readonly onPressOut?: (event: GestureResponderEvent) => void;
+    readonly onRelease?: (event: GestureResponderEvent, wasDragging: boolean) => void;
+    readonly onReverse?: () => {
+        x: number;
+        y: number;
+    };
+    readonly onShortPressRelease?: (event: GestureResponderEvent) => void;
+    readonly renderColor?: string;
+    readonly renderSize?: number;
+    readonly renderText?: string;
+    readonly scale?: number;
+    readonly shouldReverse?: boolean;
+    readonly touchableOpacityProps?: object;
+    readonly x?: number;
+    readonly y?: number;
+    readonly zIndex?: number;
+};

package/dist/components/Node/Draggable.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Dimensions, Image, PanResponder, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+const clamp = (number, min, max) => {
+    return Math.max(min, Math.min(number, max));
+};
+const styles = StyleSheet.create({
+    debugView: {
+        backgroundColor: '#ff000044',
+        borderColor: '#fced0ecc',
+        borderWidth: 4,
+        position: 'absolute'
+    },
+    text: {
+        color: '#fff',
+        textAlign: 'center'
+    }
+});
+const Draggable = ({ animatedViewProps, children, debug = false, disabled = false, imageSource, isCircle, maxX, maxY, minX, minY, onDrag, onDragRelease, onLongPress, onPressIn, onPressOut, onRelease, onShortPressRelease, renderColor, renderSize = 36, renderText = '＋', scale = 1, shouldReverse = false, touchableOpacityProps, x = 0, y = 0, zIndex = 1 }) => {
+    const pan = useRef(new Animated.ValueXY());
+    const offsetFromStart = useRef({
+        x: 0,
+        y: 0
+    });
+    const childSize = useRef({
+        x: renderSize,
+        y: renderSize
+    });
+    const startBounds = useRef({
+        bottom: 0,
+        left: 0,
+        right: 0,
+        top: 0
+    });
+    const isDragging = useRef(false);
+    const getBounds = useCallback(() => {
+        const left = x + offsetFromStart.current.x;
+        const top = y + offsetFromStart.current.y;
+        return {
+            bottom: top + childSize.current.y,
+            left,
+            right: left + childSize.current.x,
+            top
+        };
+    }, [
+        x,
+        y
+    ]);
+    const shouldStartDrag = useCallback((gs) => {
+        return !disabled && (Math.abs(gs.dx) > 2 || Math.abs(gs.dy) > 2);
+    }, [
+        disabled
+    ]);
+    const reversePosition = useCallback(() => {
+        Animated.spring(pan.current, {
+            toValue: {
+                x: 0,
+                y: 0
+            },
+            useNativeDriver: false
+        }).start();
+    }, [
+        pan
+    ]);
+    const onPanResponderRelease = useCallback((event, gestureState) => {
+        isDragging.current = false;
+        if (onDragRelease) {
+            onDragRelease(event, gestureState, getBounds());
+            if (onRelease) {
+                onRelease(event, true);
+            }
+        }
+        if (shouldReverse) {
+            reversePosition();
+        }
+        else {
+            pan.current.flattenOffset();
+        }
+    }, [
+        getBounds,
+        onDragRelease,
+        onRelease,
+        reversePosition,
+        shouldReverse
+    ]);
+    const onPanResponderGrant = useCallback((event, gestureState) => {
+        startBounds.current = getBounds();
+        isDragging.current = true;
+        if (!shouldReverse) {
+            pan.current.setOffset(offsetFromStart.current);
+            pan.current.setValue({
+                x: 0,
+                y: 0
+            });
+        }
+    }, [
+        getBounds,
+        shouldReverse
+    ]);
+    const handleOnDrag = useCallback((event, gestureState) => {
+        const { dx, dy } = gestureState;
+        const { bottom, left, right, top } = startBounds.current;
+        const far = 999999999;
+        const changeX = clamp(dx, Number.isFinite(minX) ?
+            minX - left :
+            -far, Number.isFinite(maxX) ?
+            maxX - right :
+            far);
+        const changeY = clamp(dy, Number.isFinite(minY) ?
+            minY - top :
+            -far, Number.isFinite(maxY) ?
+            maxY - bottom :
+            far);
+        pan.current.setValue({
+            x: changeX / scale,
+            y: changeY / scale
+        });
+        if (onDrag) {
+            onDrag(event, Object.assign(Object.assign({}, gestureState), { dx: changeX / scale, dy: changeY / scale }));
+        }
+    }, [
+        maxX,
+        maxY,
+        minX,
+        minY,
+        onDrag,
+        scale
+    ]);
+    const panResponder = useMemo(() => {
+        return PanResponder.create({
+            onMoveShouldSetPanResponder: (_, gestureState) => {
+                return shouldStartDrag(gestureState);
+            },
+            onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+                return shouldStartDrag(gestureState);
+            },
+            onPanResponderGrant,
+            onPanResponderMove: Animated.event([], {
+                listener: handleOnDrag,
+                useNativeDriver: false
+            }),
+            onPanResponderRelease
+        });
+    }, [
+        handleOnDrag,
+        onPanResponderGrant,
+        onPanResponderRelease,
+        shouldStartDrag
+    ]);
+    useEffect(() => {
+        const currentPan = pan.current;
+        if (!shouldReverse) {
+            currentPan.addListener((cp) => {
+                offsetFromStart.current = cp;
+                return offsetFromStart.current;
+            });
+        }
+        return () => {
+            currentPan.removeAllListeners();
+        };
+    }, [
+        shouldReverse
+    ]);
+    const positionCss = useMemo(() => {
+        const Window = Dimensions.get('window');
+        return {
+            height: Window.height,
+            left: 0,
+            position: 'absolute',
+            top: 0,
+            width: Window.width
+        };
+    }, []);
+    const hasChildren = Boolean(children);
+    const dragItemCss = useMemo(() => {
+        const style = {
+            elevation: zIndex,
+            left: x,
+            top: y,
+            zIndex
+        };
+        if (renderColor) {
+            style.backgroundColor = renderColor;
+        }
+        if (isCircle) {
+            style.borderRadius = renderSize;
+        }
+        if (hasChildren) {
+            style.alignSelf = 'baseline';
+            return style;
+        }
+        else {
+            style.height = renderSize;
+            style.justifyContent = 'center';
+            style.width = renderSize;
+            return style;
+        }
+    }, [
+        hasChildren,
+        isCircle,
+        renderColor,
+        renderSize,
+        x,
+        y,
+        zIndex
+    ]);
+    const touchableContent = useMemo(() => {
+        if (imageSource) {
+            const style = {
+                height: renderSize,
+                width: renderSize
+            };
+            return (_jsx(Image, { source: imageSource, style: style }));
+        }
+        else {
+            return (_jsx(Text, { style: styles.text, children: renderText }));
+        }
+    }, [
+        imageSource,
+        renderSize,
+        renderText
+    ]);
+    const handleOnLayout = useCallback((event) => {
+        const { height, width } = event.nativeEvent.layout;
+        childSize.current = {
+            x: width,
+            y: height
+        };
+    }, []);
+    const handlePressOut = useCallback((event) => {
+        if (onPressOut) {
+            onPressOut(event);
+        }
+        if (!isDragging.current &&
+            onRelease) {
+            onRelease(event, false);
+        }
+    }, [
+        onPressOut,
+        onRelease
+    ]);
+    const getDebugView = useCallback(() => {
+        const { height, width } = Dimensions.get('window');
+        const far = 9999;
+        const constrained = minX || maxX || minY || maxY;
+        if (!constrained) {
+            return null;
+        }
+        const left = minX || -far;
+        const right = maxX ?
+            width - maxX :
+            -far;
+        const top = minY || -far;
+        const bottom = maxY ?
+            height - maxY :
+            -far;
+        return (_jsx(View, { pointerEvents: 'box-none', style: Object.assign({ bottom,
+                left,
+                right,
+                top }, styles.debugView) }));
+    }, [
+        maxX,
+        maxY,
+        minX,
+        minY
+    ]);
+    return (_jsxs(View, { pointerEvents: 'box-none', style: positionCss, children: [debug && getDebugView(), _jsx(Animated.View, Object.assign({ pointerEvents: 'box-none' }, animatedViewProps, panResponder.panHandlers, { style: pan.current.getLayout(), children: _jsx(TouchableOpacity, Object.assign({}, touchableOpacityProps, { activeOpacity: 1, disabled: disabled, onLayout: handleOnLayout, onLongPress: onLongPress, onPress: onShortPressRelease, onPressIn: onPressIn, onPressOut: handlePressOut, style: dragItemCss, children: children !== null && children !== void 0 ? children : touchableContent })) }))] }));
+};
+Draggable.displayName = 'ReactNativeDraggable';
+export default Draggable;