@lincle/react-web-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-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 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,37 @@
+"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 = ({ scale = 1, translate = {
+    x: 0,
+    y: 0
+} }) => {
+    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
+    ]);
+    const style = (0, react_1.useMemo)(() => {
+        const tx = translate.x;
+        const ty = translate.y;
+        const tz = scale;
+        const transform = `translateX(${tx}px) translateY(${ty}px) scale(${tz})`;
+        return {
+            transform,
+            transformOrigin: 'top left'
+        };
+    }, [
+        translate.x,
+        translate.y,
+        scale
+    ]);
+    return ((0, jsx_runtime_1.jsx)("svg", { className: 'lincle-base-edges', style: style, 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,29 @@
 "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 shared_1 = require("../../shared");
+const Connections_1 = __importDefault(require("./Connections"));
+const Edges = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const scale = (0, shared_1.useScale)();
+    const translate = (0, shared_1.useTranslate)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(base_1.Edges, Object.assign({ scale: scale, translate: translate }, props, { children: children })), (0, jsx_runtime_1.jsx)(Connections_1.default, { scale: scale, translate: translate })] }));
+};
+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/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';

package/dist/components/Node/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PullNode = exports.MoveNode = exports.Node = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("../../shared");
 const MoveNode_1 = __importDefault(require("./MoveNode"));
@@ -12,20 +13,29 @@ const emptySnap = [
     1,
     1
 ];
-const Node = ({ children, className = '', disableMove: givenDisableMove, disablePull: givenDisablePull, height: givenHeight, id, line: givenLine, mode: givenMode, onDrag, onEdgeDrop: givenOnEdgeDrop, onSelect: givenOnSelect, onStart, onStop, shape: givenShape, style, width: givenWidth, x, y }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const defaultHeight = (_b = (_a = (0, react_1.useContext)(shared_1.GraphContext)) === null || _a === void 0 ? void 0 : _a.defaultSettings) === null || _b === void 0 ? void 0 : _b.height;
-    const defaultLine = (_d = (_c = (0, react_1.useContext)(shared_1.GraphContext)) === null || _c === void 0 ? void 0 : _c.defaultSettings) === null || _d === void 0 ? void 0 : _d.line;
-    const defaultShape = (_f = (_e = (0, react_1.useContext)(shared_1.GraphContext)) === null || _e === void 0 ? void 0 : _e.defaultSettings) === null || _f === void 0 ? void 0 : _f.shape;
-    const defaultWidth = (_h = (_g = (0, react_1.useContext)(shared_1.GraphContext)) === null || _g === void 0 ? void 0 : _g.defaultSettings) === null || _h === void 0 ? void 0 : _h.width;
-    const snap = (0, react_1.useContext)(shared_1.SnapContext);
-    const [snapX, snapY] = snap !== null && snap !== void 0 ? snap : emptySnap;
-    const { disableMove: graphDisableMove, disablePull: graphDisablePull, givenMode: graphGivenMode, mode: graphMode } = (0, react_1.useContext)(shared_1.ModeContext);
-    const mode = (_j = givenMode !== null && givenMode !== void 0 ? givenMode : graphGivenMode) !== null && _j !== void 0 ? _j : graphMode;
-    const { onEdgeDrop: defaultOnEdgeDrop, onNodeDrag, onNodeSelect, onNodeStart, onNodeStop } = (0, react_1.useContext)(shared_1.NodeContext);
-    const disableMove = givenDisableMove !== null && givenDisableMove !== void 0 ? givenDisableMove : graphDisableMove;
-    const disablePull = givenDisablePull !== null && givenDisablePull !== void 0 ? givenDisablePull : graphDisablePull;
-    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : defaultOnEdgeDrop;
+const Node = ({ children, height: givenHeight, id, line: givenLine, mode: givenMode, move: givenMove, onDrag, onEdgeDrop: givenOnEdgeDrop, onSelect: givenOnSelect, onStart, onStop, pull: givenPull, shape: givenShape, style, width: givenWidth, x, y }) => {
+    var _a, _b;
+    const defaultHeight = (0, shared_1.useDefaultNodeHeight)();
+    const defaultLine = (0, shared_1.useDefaultLine)();
+    const defaultShape = (0, shared_1.useDefaultShape)();
+    const defaultWidth = (0, shared_1.useDefaultNodeWidth)();
+    const snap = (0, shared_1.useSnap)();
+    const [snapX, snapY] = snap && Array.isArray(snap) ?
+        snap :
+        emptySnap;
+    const graphMode = (0, shared_1.useMode)();
+    const graphGivenMode = (0, shared_1.useModeGiven)();
+    const mode = (_a = givenMode !== null && givenMode !== void 0 ? givenMode : graphGivenMode) !== null && _a !== void 0 ? _a : graphMode;
+    const graphMove = (0, shared_1.useMove)();
+    const graphPull = (0, shared_1.usePull)();
+    const onNodeDrag = (0, shared_1.useOnNodeDrag)();
+    const onNodeEdgeDrop = (0, shared_1.useOnNodeEdgeDrop)();
+    const onNodeSelect = (0, shared_1.useOnNodeSelect)();
+    const onNodeStart = (0, shared_1.useOnNodeStart)();
+    const onNodeStop = (0, shared_1.useOnNodeStop)();
+    const move = givenMove !== null && givenMove !== void 0 ? givenMove : graphMove;
+    const pull = givenPull !== null && givenPull !== void 0 ? givenPull : graphPull;
+    const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : onNodeEdgeDrop;
     const onSelect = givenOnSelect !== null && givenOnSelect !== void 0 ? givenOnSelect : onNodeSelect;
     const pullPosition = (0, react_1.useRef)({
         x,
@@ -104,13 +114,13 @@ const Node = ({ children, className = '', disableMove: givenDisableMove, disable
         handleOnStop
     ]);
     const pullNode = (0, react_1.useMemo)(() => {
-        return mode === 'pull' && !disablePull ?
-            ((0, jsx_runtime_1.jsx)(PullNode_1.default, { disabled: disablePull !== null && disablePull !== void 0 ? disablePull : mode !== 'pull', height: height, line: line, mode: mode, onEdgeDrop: onEdgeDrop, shape: shape, sourceId: id, style: style, width: width, x: pullPosition.current.x, y: pullPosition.current.y })) :
+        return mode === 'pull' && pull ?
+            ((0, jsx_runtime_1.jsx)(PullNode_1.default, { height: height, line: line, mode: mode, onEdgeDrop: onEdgeDrop, shape: shape, sourceId: id, style: style, width: width, x: pullPosition.current.x, y: pullPosition.current.y })) :
             null;
     }, [
         mode
     ]);
-    const test = (0, react_1.useMemo)(() => {
+    const snapper = (0, react_1.useMemo)(() => {
         return {
             x: Math.ceil((x !== null && x !== void 0 ? x : 0) / snapX) * snapX,
             y: Math.ceil((y !== null && y !== void 0 ? y : 0) / snapY) * snapY
@@ -121,7 +131,11 @@ const Node = ({ children, className = '', disableMove: givenDisableMove, disable
         x,
         y
     ]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MoveNode_1.default, { className: className, disabled: disableMove !== null && disableMove !== void 0 ? disableMove : mode === 'pull', height: height, id: id, mode: mode, onDrag: handleMoveDrag, onSelect: onSelect, onStart: handleMoveStart, onStop: handleMoveStop, shape: shape, snap: snap, style: style, width: width, x: test.x, y: test.y, children: children }), pullNode] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MoveNode_1.default, { disabled: (_b = mode === 'pull') !== null && _b !== void 0 ? _b : !move, height: height, id: id, mode: mode, onDrag: handleMoveDrag, onSelect: onSelect, onStart: handleMoveStart, onStop: handleMoveStop, shape: shape, snap: snap, style: style, width: width, x: snapper.x, y: snapper.y, children: children }), pullNode] }));
 };
+exports.Node = Node;
 Node.displayName = 'LincleInteractiveNode';
-exports.default = Node;
+var MoveNode_2 = require("./MoveNode");
+Object.defineProperty(exports, "MoveNode", { enumerable: true, get: function () { return __importDefault(MoveNode_2).default; } });
+var PullNode_2 = require("./PullNode");
+Object.defineProperty(exports, "PullNode", { enumerable: true, get: function () { return __importDefault(PullNode_2).default; } });

package/dist/components/{Interaction → Nodes/Interaction}/index.d.ts

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