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

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,4 @@
+import { type ConnectionsProps } from '../../../shared';
+import { type FunctionComponent } from 'react';
+declare const Connections: FunctionComponent<ConnectionsProps>;
+export default Connections;

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

@@ -0,0 +1,39 @@
+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: {
+        overflow: 'visible',
+        position: 'absolute'
+    }
+});
+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,31 @@
-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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Edges as BaseEdges } from '../../base';
+import { useScale, useTranslate } from '../../shared';
+import Connections from './Connections';
+import { StyleSheet, View } from 'react-native';
+const { edgesStyle } = StyleSheet.create({
+    edgesStyle: {
+        height: '100%',
+        position: 'absolute',
+        width: '100%'
+    }
+});
+const Edges = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const scale = useScale();
+    const translate = useTranslate();
+    return (_jsxs(View, { style: edgesStyle, 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/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;

package/dist/components/Node/MoveNode/index.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Node as WrappedNode } from '../../../base';
+import { useScale } from '../../../shared';
+import Draggable from '../Draggable';
 import { useCallback, useMemo, useState } from 'react';
-import Draggable from 'react-native-draggable';
-const MoveNode = ({ children, height = 50, id, onDrag, shape, style: { node: nodeStyle } = {}, track = false, width = 50, x = 0, y = 0 }) => {
+const MoveNode = ({ children, disabled, height = 50, id, onDrag, shape, style: { node: nodeStyle } = {}, track = false, width = 50, x = 0, y = 0 }) => {
+    const scale = useScale();
     const [position, setPosition] = useState({
         x,
         y
@@ -52,7 +54,7 @@ const MoveNode = ({ children, height = 50, id, onDrag, shape, style: { node: nod
     }, [
         nodeStyle
     ]);
-    return (_jsx(Draggable, { onDrag: handleDrag, onDragRelease: handleDragRelease, x: x, y: y, children: _jsx(WrappedNode, { height: height, id: id, shape: shape, style: style, track: track, width: width, x: position.x, y: position.y, children: children }) }));
+    return (_jsx(Draggable, { disabled: disabled, onDrag: handleDrag, onDragRelease: handleDragRelease, scale: scale, x: x, y: y, children: _jsx(WrappedNode, { height: height, id: id, shape: shape, style: style, track: track, width: width, x: position.x, y: position.y, children: children }) }));
 };
 MoveNode.displayName = 'LincleInteractiveMoveNode';
 export default MoveNode;

package/dist/components/Node/PullNode/index.js

@@ -1,5 +1,122 @@
-const PullNode = ({ children }) => {
-    return children;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDiagramId, useNodePositions, useOnNodeEdgeDrop, useScale, useSetConnection } from '../../../shared';
+import Draggable from '../Draggable';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+const PullNode = ({ disabled, height = 0, line = 'direct', onDrag, onEdgeDrop: givenOnEdgeDrop, onStart, onStop, shape = 'oval', sourceId, style: givenStyle, width = 0, x = 0, y = 0 }) => {
+    const diagramId = useDiagramId();
+    const nodePositions = useNodePositions();
+    const setConnection = useSetConnection(sourceId);
+    const onNodeEdgeDrop = useOnNodeEdgeDrop();
+    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : onNodeEdgeDrop;
+    const scale = useScale();
+    const mouseOffset = useRef(null);
+    const position = useRef(null);
+    useEffect(() => {
+        return () => {
+            setConnection();
+            position.current = null;
+            mouseOffset.current = null;
+        };
+    }, []);
+    const handlePressIn = useCallback((event) => {
+        event.stopPropagation();
+        if (!disabled &&
+            onStart) {
+            onStart(event);
+        }
+    }, [
+        disabled,
+        onStart
+    ]);
+    const handleDrag = useCallback((event, gestureState) => {
+        var _a, _b, _c, _d;
+        if (!mouseOffset.current) {
+            mouseOffset.current = {
+                x: event.nativeEvent.locationX,
+                y: event.nativeEvent.locationY
+            };
+        }
+        if (!disabled) {
+            position.current = {
+                x: (_b = x + gestureState.dx + ((_a = mouseOffset.current) === null || _a === void 0 ? void 0 : _a.x)) !== null && _b !== void 0 ? _b : 0,
+                y: (_d = y + gestureState.dy + ((_c = mouseOffset.current) === null || _c === void 0 ? void 0 : _c.y)) !== null && _d !== void 0 ? _d : 0
+            };
+            setConnection({
+                line,
+                source: {
+                    height,
+                    id: sourceId,
+                    shape,
+                    width,
+                    x,
+                    y
+                },
+                target: {
+                    height: 0,
+                    id: sourceId,
+                    shape,
+                    width: 0,
+                    x: position.current.x,
+                    y: position.current.y
+                }
+            });
+            if (onDrag) {
+                onDrag(event, gestureState);
+            }
+        }
+    }, [
+        disabled,
+        height,
+        line,
+        onDrag,
+        setConnection,
+        shape,
+        sourceId,
+        width,
+        x,
+        y
+    ]);
+    const handleRelease = useCallback((event, data) => {
+        setConnection();
+        if (onStop) {
+            onStop(event, data);
+        }
+        if (onEdgeDrop &&
+            nodePositions &&
+            position.current) {
+            nodePositions.match(position.current.x, position.current.y).then((match) => {
+                onEdgeDrop(event, sourceId, Boolean(match) || match === 0 ?
+                    match :
+                    undefined);
+            }).catch(() => {
+            });
+        }
+        position.current = null;
+        mouseOffset.current = null;
+    }, [
+        nodePositions,
+        onEdgeDrop,
+        onStop,
+        setConnection,
+        sourceId
+    ]);
+    const style = useMemo(() => {
+        return StyleSheet.create({
+            view: Object.assign(Object.assign({}, givenStyle), { borderRadius: shape === 'oval' ?
+                    50 :
+                    undefined, height,
+                width })
+        });
+    }, [
+        givenStyle,
+        height,
+        shape,
+        width
+    ]);
+    return diagramId ?
+        (_jsx(Draggable, { disabled: disabled, onDrag: handleDrag, onDragRelease: handleRelease, onPressIn: handlePressIn, renderSize: height, scale: scale, shouldReverse: true, x: x, y: y, children: _jsx(View, { style: style.view }) })) :
+        null;
 };
 PullNode.displayName = 'LincleInteractivePullNode';
 export default PullNode;

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

@@ -1,4 +1,6 @@
 import { type NodeProps } from '../../shared';
 import { type FunctionComponent } from 'react';
 declare const Node: FunctionComponent<NodeProps>;
-export default Node;
+export { Node };
+export { default as MoveNode } from './MoveNode';
+export { default as PullNode } from './PullNode';