@lincle/react-web-interactive 0.4.0-next.1 → 0.4.0-next.11

package/dist/components/Interaction/index.js

@@ -1,26 +1,31 @@
 "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 Controls_1 = __importDefault(require("./Controls"));
 const react_1 = require("react");
 const react_map_interaction_1 = require("react-map-interaction");
-const CLICK_TIME = 500;
-const PRESS_TIME = 350;
-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 controls = () => {
+    return (0, jsx_runtime_1.jsx)(Controls_1.default, {});
+};
+const Interaction = () => {
+    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 givenMode = (0, shared_1.useModeGiven)();
+    const onMode = (0, shared_1.useOnMode)();
+    const maxScale = (0, shared_1.useMaxScale)();
+    const minScale = (0, shared_1.useMinScale)();
+    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 handleMode = (0, react_1.useCallback)((changedMode) => {
+        if (onMode) {
+            onMode(changedMode);
         }
     }, [
         onMode
@@ -52,12 +57,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 +71,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,89 +84,6 @@ 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;
-            }
-            handleMode('move');
-        }
-    }, [
-        givenMode,
-        handleMode
-    ]);
-    const handleMouseDown = (0, react_1.useCallback)((event) => {
-        if (onMouseDown) {
-            onMouseDown(event);
-        }
-    }, [
-        onMouseDown
-    ]);
-    const handleMouseUp = (0, react_1.useCallback)((event) => {
-        if (onMouseUp) {
-            onMouseUp(event);
-        }
-    }, [
-        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();
-        }
-        if (onTouchEnd) {
-            onTouchEnd(event);
-        }
-    }, [
-        handleTapEnd,
-        onTouchEnd
-    ]);
     const transform = (0, react_1.useMemo)(() => {
         return {
             scale,
@@ -185,18 +93,7 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
         scale,
         translate
     ]);
-    const style = (0, react_1.useMemo)(() => {
-        const { x, y } = translate;
-        return {
-            transform: `translateX(${x}px) translateY(${y}px) scale(${scale}) translateZ(0)`
-        };
-    }, [
-        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)("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 }) }));
-        } }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-container', children: (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: controls }) }));
 };
 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';

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/Nodes/Interaction/index.d.ts

@@ -0,0 +1,3 @@
+import { type FunctionComponent, type PropsWithChildren } from 'react';
+declare const Interaction: FunctionComponent<PropsWithChildren<{}>>;
+export default Interaction;

package/dist/components/Nodes/Interaction/index.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("../../../shared");
+const react_1 = require("react");
+const Interaction = ({ children }) => {
+    const scale = (0, shared_1.useScale)();
+    const translate = (0, shared_1.useTranslate)();
+    const givenMode = (0, shared_1.useModeGiven)();
+    const onMode = (0, shared_1.useOnMode)();
+    const keypress = (0, react_1.useRef)(false);
+    const handleMode = (0, react_1.useCallback)((changedMode) => {
+        if (onMode) {
+            onMode(changedMode);
+        }
+    }, [
+        onMode
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (givenMode) {
+            return () => {
+            };
+        }
+        const onKeyDown = (event) => {
+            keypress.current = true;
+            if (event.shiftKey) {
+                handleMode('pull');
+            }
+            else if (event.ctrlKey) {
+                handleMode('select');
+            }
+        };
+        const onKeyUp = (event) => {
+            keypress.current = false;
+            if (!event.shiftKey) {
+                handleMode('move');
+            }
+            else if (!event.ctrlKey) {
+                handleMode('move');
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        return () => {
+            keypress.current = false;
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+        };
+    }, [
+        givenMode,
+        handleMode
+    ]);
+    const style = (0, react_1.useMemo)(() => {
+        const { x, y } = translate;
+        return {
+            transform: `translateX(${x}px) translateY(${y}px) scale(${scale}) translateZ(0)`
+        };
+    }, [
+        scale,
+        translate
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-graph', children: (0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
+};
+Interaction.displayName = 'LincleInteractiveInteraction';
+exports.default = Interaction;

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

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

package/dist/components/Nodes/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.Nodes; } });
+exports.Nodes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const base_1 = require("../../base");
+const Interaction_1 = __importDefault(require("./Interaction"));
+const Nodes = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(Interaction_1.default, { children: (0, jsx_runtime_1.jsx)(base_1.Nodes, Object.assign({}, props, { children: children })) }));
+};
+exports.Nodes = Nodes;
+Nodes.displayName = 'LincleInteractiveNodes';

package/dist/components/index.d.ts

@@ -1,9 +1,5 @@
-export { default as Edge } from './Edge';
-export { default as Edges } from './Edges';
-export { default as Graph } from './Graph';
-export { default as GraphContexts } from './GraphContexts';
-export { default as Grid } from './Grid';
-export { default as Node } from './Node';
-export { default as Nodes } from './Nodes';
-export { default as Path } from './Path';
-export { default as Pull } from './Pull';
+export * from './Edge';
+export * from './Edges';
+export * from './Graph';
+export * from './Node';
+export * from './Nodes';

package/dist/components/index.js

@@ -1,24 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pull = exports.Path = exports.Nodes = exports.Node = exports.Grid = exports.GraphContexts = exports.Graph = exports.Edges = exports.Edge = void 0;
-var Edge_1 = require("./Edge");
-Object.defineProperty(exports, "Edge", { enumerable: true, get: function () { return __importDefault(Edge_1).default; } });
-var Edges_1 = require("./Edges");
-Object.defineProperty(exports, "Edges", { enumerable: true, get: function () { return __importDefault(Edges_1).default; } });
-var Graph_1 = require("./Graph");
-Object.defineProperty(exports, "Graph", { enumerable: true, get: function () { return __importDefault(Graph_1).default; } });
-var GraphContexts_1 = require("./GraphContexts");
-Object.defineProperty(exports, "GraphContexts", { enumerable: true, get: function () { return __importDefault(GraphContexts_1).default; } });
-var Grid_1 = require("./Grid");
-Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return __importDefault(Grid_1).default; } });
-var Node_1 = require("./Node");
-Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return __importDefault(Node_1).default; } });
-var Nodes_1 = require("./Nodes");
-Object.defineProperty(exports, "Nodes", { enumerable: true, get: function () { return __importDefault(Nodes_1).default; } });
-var Path_1 = require("./Path");
-Object.defineProperty(exports, "Path", { enumerable: true, get: function () { return __importDefault(Path_1).default; } });
-var Pull_1 = require("./Pull");
-Object.defineProperty(exports, "Pull", { enumerable: true, get: function () { return __importDefault(Pull_1).default; } });
+__exportStar(require("./Edge"), exports);
+__exportStar(require("./Edges"), exports);
+__exportStar(require("./Graph"), exports);
+__exportStar(require("./Node"), exports);
+__exportStar(require("./Nodes"), exports);