@lincle/react-web-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-web-base';
+export { Edge, Edges, Graph, Grid, Node, Nodes, Path } from '@lincle/react-web-base';

package/dist/base.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Path = exports.Nodes = exports.Node = exports.Grid = exports.GraphContexts = exports.Graph = exports.Edges = exports.Edge = void 0;
+exports.Path = exports.Nodes = exports.Node = exports.Grid = exports.Graph = exports.Edges = exports.Edge = void 0;
 var react_web_base_1 = require("@lincle/react-web-base");
 Object.defineProperty(exports, "Edge", { enumerable: true, get: function () { return react_web_base_1.Edge; } });
 Object.defineProperty(exports, "Edges", { enumerable: true, get: function () { return react_web_base_1.Edges; } });
 Object.defineProperty(exports, "Graph", { enumerable: true, get: function () { return react_web_base_1.Graph; } });
-Object.defineProperty(exports, "GraphContexts", { enumerable: true, get: function () { return react_web_base_1.GraphContexts; } });
 Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return react_web_base_1.Grid; } });
 Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return react_web_base_1.Node; } });
 Object.defineProperty(exports, "Nodes", { enumerable: true, get: function () { return react_web_base_1.Nodes; } });

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

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

package/dist/components/{Path → Edge/Path}/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-var base_1 = require("../../base");
+var base_1 = require("../../../base");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return base_1.Path; } });

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

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

package/dist/components/Edge/index.js

@@ -1,5 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
+exports.Path = exports.Edge = void 0;
 var base_1 = require("../../base");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return base_1.Edge; } });
+Object.defineProperty(exports, "Edge", { enumerable: true, get: function () { return base_1.Edge; } });
+var Path_1 = require("./Path");
+Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return __importDefault(Path_1).default; } });

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

@@ -0,0 +1,4 @@
+import { type FunctionComponent, type PropsWithChildren } from 'react';
+declare const Connections: FunctionComponent<ConnectionsProps>;
+export default Connections;
+export type ConnectionsProps = PropsWithChildren<{}>;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../../shared");
+const Edge_1 = require("../../Edge");
+const react_1 = require("react");
+const Connections = () => {
+    const connections = (0, shared_1.useConnections)();
+    const paths = (0, react_1.useMemo)(() => {
+        return Object.keys(connections).map((sourceId) => {
+            const { line, source, target } = connections[sourceId];
+            return ((0, jsx_runtime_1.jsx)(Edge_1.Path, { edgeId: sourceId + 'temp', line: line, source: source, target: target }, sourceId));
+        });
+    }, [
+        connections
+    ]);
+    return ((0, jsx_runtime_1.jsx)("svg", { className: 'lincle-interactive-connection', children: paths }));
+};
+Connections.displayName = 'LincleInteractiveConnections';
+exports.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,5 +1,26 @@
 "use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var base_1 = require("../../base");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return base_1.Edges; } });
+exports.Edges = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("../../base");
+const Connections_1 = __importDefault(require("./Connections"));
+const Edges = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsxs)(base_1.Edges, Object.assign({}, props, { children: [children, (0, jsx_runtime_1.jsx)(Connections_1.default, {})] })));
+};
+exports.Edges = Edges;
+Edges.displayName = 'LincleInteractiveEdges';

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,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("../../../base");
+const shared_1 = require("../../../shared");
+const react_1 = require("react");
+const WIDTH = 0.4;
+const Grid = ({ children }) => {
+    const scale = (0, shared_1.useScale)();
+    const translate = (0, shared_1.useTranslate)();
+    const mode = (0, shared_1.useMode)();
+    const line = (0, react_1.useMemo)(() => {
+        const t1 = 1 + scale;
+        const t2 = 4 * scale;
+        return ((0, jsx_runtime_1.jsx)("line", { stroke: 'black', strokeWidth: WIDTH, x1: t1, x2: t2, y1: t1, y2: t2 }));
+    }, [
+        scale
+    ]);
+    const plus = (0, react_1.useMemo)(() => {
+        const t1 = scale;
+        const t2 = 4 * scale;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { stroke: 'black', strokeWidth: WIDTH, x1: t1, x2: t2, y1: t2, y2: t2 }), (0, jsx_runtime_1.jsx)("line", { stroke: 'black', strokeWidth: WIDTH, x1: t2, x2: t2, y1: t1, y2: t2 })] }));
+    }, [
+        scale
+    ]);
+    const circle = (0, react_1.useMemo)(() => {
+        const t2 = 4 * scale;
+        return ((0, jsx_runtime_1.jsx)("circle", { cx: t2, cy: t2, fill: 'black', r: WIDTH }));
+    }, [
+        scale
+    ]);
+    const child = (0, react_1.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 ((0, jsx_runtime_1.jsx)(base_1.Grid, { scale: scale, xOffset: translate.x, yOffset: translate.y, children: child }));
+};
+Grid.displayName = 'LincleInteractiveGrid';
+exports.default = Grid;

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

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

package/dist/components/Graph/index.js

@@ -3,16 +3,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = exports.Graph = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const base_1 = require("../../base");
-const GraphContexts_1 = __importDefault(require("../GraphContexts"));
-const Interaction_1 = __importDefault(require("../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 }) => {
+const shared_1 = require("../../shared");
+const Grid_1 = __importDefault(require("./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 ((0, jsx_runtime_1.jsx)(GraphContexts_1.default, { 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: (0, jsx_runtime_1.jsx)(base_1.Graph, { grid: false, id: id, children: (0, jsx_runtime_1.jsx)(Interaction_1.default, { onMouseDown: onMouseDown, onMouseUp: onMouseUp, onTouchEnd: onTouchEnd, onTouchStart: onTouchStart, children: children }) }) }));
+    const gird = showGrid === false ?
+        null :
+        (0, jsx_runtime_1.jsx)(Grid_1.default, {});
+    return ((0, jsx_runtime_1.jsx)(shared_1.GraphBase, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, showGrid: false, children: (0, jsx_runtime_1.jsxs)(shared_1.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] }) }));
 };
+exports.Graph = Graph;
 Graph.displayName = 'LincleInteractiveGraph';
-exports.default = Graph;
+var Grid_2 = require("./Grid");
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return __importDefault(Grid_2).default; } });

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,26 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interaction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("../../shared");
 const react_1 = require("react");
 const react_map_interaction_1 = require("react-map-interaction");
 const CLICK_TIME = 500;
-const PRESS_TIME = 350;
+const useDoubleTap = () => {
+    const timer = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+                timer.current = null;
+            }
+        };
+    }, []);
+    return (0, react_1.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 Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
-    const { givenMode, onMode } = (0, react_1.useContext)(shared_1.ModeContext);
-    const { onNodeSelect } = (0, react_1.useContext)(shared_1.NodeContext);
-    const { disablePan, disableScale, maxScale, minScale } = (0, react_1.useContext)(shared_1.TransformContext);
-    const { onScale, scale } = (0, react_1.useContext)(shared_1.ScaleContext);
-    const { onTranslate, translate } = (0, react_1.useContext)(shared_1.TranslateContext);
-    const clickTimeout = (0, react_1.useRef)();
-    const pressTimeout = (0, react_1.useRef)();
+    const scale = (0, shared_1.useScale)();
+    const onScale = (0, shared_1.useOnScale)();
+    const translate = (0, shared_1.useTranslate)();
+    const onTranslate = (0, shared_1.useOnTranslate)();
+    const graphMode = (0, shared_1.useMode)();
+    const givenMode = (0, shared_1.useModeGiven)();
+    const onMode = (0, shared_1.useOnMode)();
+    const maxScale = (0, shared_1.useMinScale)();
+    const minScale = (0, shared_1.useMaxScale)();
+    const pan = (0, shared_1.usePan)();
+    const zoom = (0, shared_1.useZoom)();
     const keypress = (0, react_1.useRef)(false);
-    const privateMode = (0, react_1.useRef)(givenMode);
-    const handleMode = (0, react_1.useCallback)((mode) => {
-        if (onMode &&
-            privateMode.current !== mode) {
-            privateMode.current = mode;
-            onMode(mode);
+    const handleDoubleTap = useDoubleTap();
+    const handleMode = (0, react_1.useCallback)((changedMode) => {
+        if (onMode) {
+            onMode(changedMode);
         }
     }, [
         onMode
@@ -52,12 +78,6 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
         window.addEventListener('keyup', onKeyUp);
         return () => {
             keypress.current = false;
-            if (clickTimeout.current) {
-                clearTimeout(clickTimeout.current);
-            }
-            if (pressTimeout.current) {
-                clearTimeout(pressTimeout.current);
-            }
             window.removeEventListener('keydown', onKeyDown);
             window.removeEventListener('keyup', onKeyUp);
         };
@@ -72,14 +92,6 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
         };
     }, []);
     const handleChange = (0, react_1.useCallback)(({ scale: z, translation: { x, y } }) => {
-        if (pressTimeout.current) {
-            clearTimeout(pressTimeout.current);
-            pressTimeout.current = undefined;
-        }
-        if (clickTimeout.current) {
-            clearTimeout(clickTimeout.current);
-            clickTimeout.current = undefined;
-        }
         if (onTranslate) {
             onTranslate({
                 x,
@@ -93,50 +105,34 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
         onScale,
         onTranslate
     ]);
-    const handlePressStart = (0, react_1.useCallback)(() => {
-        if (!givenMode &&
-            onNodeSelect &&
-            !clickTimeout.current) {
-            pressTimeout.current = setTimeout(() => {
-                pressTimeout.current = undefined;
-                handleMode('select');
-            }, PRESS_TIME);
-        }
-    }, [
-        givenMode,
-        handleMode,
-        onNodeSelect
-    ]);
-    const handleTapStart = (0, react_1.useCallback)(() => {
-        if (!givenMode) {
-            if (clickTimeout.current) {
-                clearTimeout(clickTimeout.current);
-                clickTimeout.current = setTimeout(() => {
-                    clickTimeout.current = undefined;
-                    handleMode('pull');
-                }, PRESS_TIME);
-            }
-            else {
-                clickTimeout.current = setTimeout(() => {
-                    clickTimeout.current = undefined;
-                }, CLICK_TIME);
-            }
-        }
-    }, [
-        givenMode,
-        handleMode
-    ]);
     const handleTapEnd = (0, react_1.useCallback)(() => {
-        if (!givenMode) {
-            if (pressTimeout.current) {
-                clearTimeout(pressTimeout.current);
-                pressTimeout.current = undefined;
+        if (onMode) {
+            switch (graphMode) {
+                case 'move': {
+                    return handleDoubleTap(() => {
+                        onMode('pull');
+                    });
+                }
+                case 'pull': {
+                    return handleDoubleTap(() => {
+                        onMode('select');
+                    });
+                }
+                case 'select':
+                default: {
+                    return handleDoubleTap(() => {
+                        onMode('move');
+                    });
+                }
             }
-            handleMode('move');
+        }
+        else {
+            return;
         }
     }, [
-        givenMode,
-        handleMode
+        graphMode,
+        handleDoubleTap,
+        onMode
     ]);
     const handleMouseDown = (0, react_1.useCallback)((event) => {
         if (onMouseDown) {
@@ -146,29 +142,23 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
         onMouseDown
     ]);
     const handleMouseUp = (0, react_1.useCallback)((event) => {
+        handleTapEnd();
         if (onMouseUp) {
             onMouseUp(event);
         }
     }, [
+        handleTapEnd,
         onMouseUp
     ]);
     const handleTouchStart = (0, react_1.useCallback)((event) => {
-        if (keypress.current === false) {
-            handlePressStart();
-            handleTapStart();
-        }
         if (onTouchStart) {
             onTouchStart(event);
         }
     }, [
-        handlePressStart,
-        handleTapStart,
         onTouchStart
     ]);
     const handleTouchEnd = (0, react_1.useCallback)((event) => {
-        if (keypress.current === false) {
-            handleTapEnd();
-        }
+        handleTapEnd();
         if (onTouchEnd) {
             onTouchEnd(event);
         }
@@ -194,9 +184,9 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
         scale,
         translate
     ]);
-    return ((0, jsx_runtime_1.jsx)(react_map_interaction_1.MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: disablePan, disableZoom: disableScale, maxScale: maxScale, minScale: minScale, onChange: handleChange, value: transform, children: () => {
+    return ((0, jsx_runtime_1.jsx)(react_map_interaction_1.MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: !pan, disableZoom: !zoom, maxScale: maxScale, minScale: minScale, onChange: handleChange, value: transform, children: () => {
             return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-graph', onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchEnd: handleTouchEnd, onTouchStart: handleTouchStart, role: 'none', children: (0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
         } }));
 };
+exports.Interaction = Interaction;
 Interaction.displayName = 'LincleInteractiveInteraction';
-exports.default = Interaction;

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

@@ -10,9 +10,28 @@ const emptySnap = [
     1,
     1
 ];
-const MoveNode = ({ children, className, disabled, height, id, mode, onDrag, onSelect, onStart, onStop, shape, snap, style, width, x, y }) => {
-    const { scale } = (0, react_1.useContext)(shared_1.ScaleContext);
-    const [snapX, snapY] = snap !== null && snap !== void 0 ? snap : emptySnap;
+const MoveNode = ({ children, className, disabled, height, id, mode, onDrag, onSelect, onStart, onStop, shape, snap: givenSnap, style, width, x, y }) => {
+    const scale = (0, shared_1.useScale)();
+    const snap = (0, shared_1.useSnap)();
+    const [snapX, snapY] = (0, react_1.useMemo)(() => {
+        if (givenSnap === undefined) {
+            if (Array.isArray(snap)) {
+                return snap;
+            }
+            else {
+                return emptySnap;
+            }
+        }
+        else if (Array.isArray(givenSnap)) {
+            return givenSnap;
+        }
+        else {
+            return emptySnap;
+        }
+    }, [
+        givenSnap,
+        snap
+    ]);
     const [position, setPosition] = (0, react_1.useState)({
         x,
         y

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

@@ -1,40 +1,53 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("../../../shared");
-const Pull_1 = __importDefault(require("../../Pull"));
 const react_1 = require("react");
 const react_draggable_1 = require("react-draggable");
-const PullNode = ({ className, disabled, height, line, onDrag, onEdgeDrop: givenOnEdgeDrop, onStart, onStop, shape, sourceId, style, width, x, y }) => {
-    var _a, _b;
-    const diagramId = (_a = (0, react_1.useContext)(shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.diagramId;
-    const nodePositions = (_b = (0, react_1.useContext)(shared_1.GraphContext)) === null || _b === void 0 ? void 0 : _b.nodePositions;
-    const { onEdgeDrop: defaultOnEdgeDrop } = (0, react_1.useContext)(shared_1.NodeContext);
-    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : defaultOnEdgeDrop;
-    const { scale } = (0, react_1.useContext)(shared_1.ScaleContext);
-    const [position, setPosition] = (0, react_1.useState)({
-        x,
-        y
-    });
-    const pos = (0, react_1.useRef)(position);
-    pos.current = position;
+const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, onEdgeDrop: givenOnEdgeDrop, onStart, onStop, shape = 'oval', sourceId, style, width = 0, x = 0, y = 0 }) => {
+    const diagramId = (0, shared_1.useDiagramId)();
+    const nodePositions = (0, shared_1.useNodePositions)();
+    const setConnection = (0, shared_1.useSetConnection)(sourceId);
+    const onNodeEdgeDrop = (0, shared_1.useOnNodeEdgeDrop)();
+    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : onNodeEdgeDrop;
+    const scale = (0, shared_1.useScale)();
+    (0, react_1.useEffect)(() => {
+        return () => {
+            setConnection();
+        };
+    }, []);
     const handleStart = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        if (onStart) {
+        if (!disabled &&
+            onStart) {
             onStart(event);
         }
     }, [
+        disabled,
         onStart
     ]);
     const handleDrag = (0, react_1.useCallback)((event, data) => {
+        var _a, _b;
         event.stopPropagation();
         if (!disabled) {
-            setPosition({
-                x: data.x,
-                y: data.y
+            setConnection({
+                line,
+                source: {
+                    height,
+                    id: sourceId,
+                    shape,
+                    width,
+                    x,
+                    y
+                },
+                target: {
+                    height: 0,
+                    id: sourceId,
+                    shape,
+                    width: 0,
+                    x: (_a = data.x) !== null && _a !== void 0 ? _a : 0,
+                    y: (_b = data.y) !== null && _b !== void 0 ? _b : 0
+                }
             });
             if (onDrag) {
                 onDrag(event, data);
@@ -42,48 +55,53 @@ const PullNode = ({ className, disabled, height, line, onDrag, onEdgeDrop: given
         }
     }, [
         disabled,
-        onDrag
+        height,
+        line,
+        onDrag,
+        setConnection,
+        shape,
+        sourceId,
+        width,
+        x,
+        y
     ]);
     const handleStop = (0, react_1.useCallback)((event, data) => {
         event.stopPropagation();
-        if (!disabled) {
-            setPosition({
-                x: data.x,
-                y: data.y
-            });
-        }
+        setConnection();
         if (onStop) {
             onStop(event, data);
         }
         if (onEdgeDrop &&
-            nodePositions &&
-            position.x &&
-            position.y) {
-            nodePositions.match(position.x, position.y).then((match) => {
-                onEdgeDrop(sourceId, Boolean(match) || match === 0 ?
+            nodePositions) {
+            nodePositions.match(data.x, data.y).then((match) => {
+                onEdgeDrop(event, sourceId, Boolean(match) || match === 0 ?
                     match :
                     undefined);
             }).catch(() => {
             });
         }
-        setPosition({
-            x,
-            y
-        });
     }, [
-        disabled,
         nodePositions,
         onEdgeDrop,
         onStop,
-        position.x,
-        position.y,
-        sourceId,
+        setConnection,
+        sourceId
+    ]);
+    const viewStyle = (0, react_1.useMemo)(() => {
+        return Object.assign({ borderRadius: shape === 'oval' ?
+                50 :
+                undefined, height, left: x, position: 'absolute', top: y, width }, style);
+    }, [
+        height,
+        shape,
+        style,
+        width,
         x,
         y
     ]);
     const nodeRef = (0, react_1.useRef)(null);
     return diagramId ?
-        ((0, jsx_runtime_1.jsx)(react_draggable_1.DraggableCore, { disabled: disabled, nodeRef: nodeRef, onDrag: handleDrag, onStart: handleStart, onStop: handleStop, scale: scale, children: (0, jsx_runtime_1.jsx)(Pull_1.default, { className: className, diagramId: diagramId, height: height, line: line, ref: nodeRef, shape: shape, sourceId: sourceId, style: style, width: width, x: position.x, y: position.y }) })) :
+        ((0, jsx_runtime_1.jsx)(react_draggable_1.DraggableCore, { disabled: disabled, nodeRef: nodeRef, onDrag: handleDrag, onStart: handleStart, onStop: handleStop, scale: scale, children: (0, jsx_runtime_1.jsx)("div", { className: className, ref: nodeRef, style: viewStyle }) })) :
         null;
 };
 PullNode.displayName = 'LincleInteractivePullNode';

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';