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

package/dist/components/Node/index.js

@@ -1,19 +1,133 @@
-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 } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useMode, useModeGiven, useMove, useOnNodeDrag, useOnNodeEdgeDrop, useOnNodeSelect, useOnNodeStart, useOnNodeStop, usePull, useSnap } from '../../shared';
 import MoveNode from './MoveNode';
-const Node = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (_jsx(MoveNode, Object.assign({ disabled: false }, props, { children: children })));
+import PullNode from './PullNode';
+import { useCallback, useMemo, useRef } from 'react';
+const emptySnap = [
+    1,
+    1
+];
+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 = useDefaultNodeHeight();
+    const defaultLine = useDefaultLine();
+    const defaultShape = useDefaultShape();
+    const defaultWidth = useDefaultNodeWidth();
+    const snap = useSnap();
+    const [snapX, snapY] = snap && Array.isArray(snap) ?
+        snap :
+        emptySnap;
+    const graphMode = useMode();
+    const graphGivenMode = useModeGiven();
+    const mode = (_a = givenMode !== null && givenMode !== void 0 ? givenMode : graphGivenMode) !== null && _a !== void 0 ? _a : graphMode;
+    const graphMove = useMove();
+    const graphPull = usePull();
+    const onNodeDrag = useOnNodeDrag();
+    const onNodeEdgeDrop = useOnNodeEdgeDrop();
+    const onNodeSelect = useOnNodeSelect();
+    const onNodeStart = useOnNodeStart();
+    const onNodeStop = 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 = useRef({
+        x,
+        y
+    });
+    const { height, line, shape, width } = useMemo(() => {
+        return {
+            height: givenHeight !== null && givenHeight !== void 0 ? givenHeight : defaultHeight,
+            line: givenLine !== null && givenLine !== void 0 ? givenLine : defaultLine,
+            shape: givenShape !== null && givenShape !== void 0 ? givenShape : defaultShape,
+            width: givenWidth !== null && givenWidth !== void 0 ? givenWidth : defaultWidth
+        };
+    }, [
+        defaultHeight,
+        defaultLine,
+        defaultShape,
+        defaultWidth,
+        givenHeight,
+        givenLine,
+        givenShape,
+        givenWidth
+    ]);
+    const handleOnStart = useCallback((event) => {
+        if (onStart) {
+            onStart(event);
+        }
+        else if (onNodeStart) {
+            onNodeStart(event, id);
+        }
+    }, [
+        id,
+        onNodeStart,
+        onStart
+    ]);
+    const handleOnDrag = useCallback((event, data) => {
+        if (onDrag) {
+            onDrag(event, data);
+        }
+        else if (onNodeDrag) {
+            onNodeDrag(event, id, data);
+        }
+    }, [
+        id,
+        onDrag,
+        onNodeDrag
+    ]);
+    const handleOnStop = useCallback((event, data) => {
+        if (onStop) {
+            onStop(event, data);
+        }
+        else if (onNodeStop) {
+            onNodeStop(event, id, data);
+        }
+    }, [
+        id,
+        onNodeStop,
+        onStop
+    ]);
+    const handleMoveStart = useCallback((event) => {
+        handleOnStart(event);
+    }, [
+        handleOnStart
+    ]);
+    const handleMoveDrag = useCallback((event, data, position) => {
+        pullPosition.current = {
+            x: position.x,
+            y: position.y
+        };
+        handleOnDrag(event, data);
+    }, [
+        handleOnDrag
+    ]);
+    const handleMoveStop = useCallback((event, data) => {
+        handleOnStop(event, data);
+    }, [
+        handleOnStop
+    ]);
+    const pullNode = useMemo(() => {
+        return mode === 'pull' && pull ?
+            (_jsx(PullNode, { 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 snapper = 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
+        };
+    }, [
+        snapX,
+        snapY,
+        x,
+        y
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(MoveNode, { 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] }));
 };
 Node.displayName = 'LincleInteractiveNode';
-export default Node;
+export { Node };
+export { default as MoveNode } from './MoveNode';
+export { default as PullNode } from './PullNode';

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;

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMode, useOnMode, useOnScale, useOnTranslateThrottle, useScale, useTranslate } from '../../../shared';
+import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
+import { useCallback, useEffect, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+const CLICK_TIME = 500;
+const useDoubleTap = () => {
+    const timer = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+                timer.current = null;
+            }
+        };
+    }, []);
+    return useCallback((callback, threshold = CLICK_TIME) => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+            return callback();
+        }
+        else {
+            timer.current = setTimeout(() => {
+                timer.current = null;
+            }, threshold);
+            return;
+        }
+    }, []);
+};
+const styles = StyleSheet.create({
+    container: {
+        height: '100%',
+        overflow: 'visible'
+    },
+    zoomable: {
+        overflow: 'visible'
+    }
+});
+const Interaction = ({ children, onPointerUp }) => {
+    const scale = useScale();
+    const translate = useTranslate();
+    const onScale = useOnScale();
+    const onTranslateThrottle = useOnTranslateThrottle();
+    const graphMode = useMode();
+    const onMode = useOnMode();
+    const handleDoubleTap = useDoubleTap();
+    const handleOnTransform = useCallback((event) => {
+        const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = event;
+        onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
+    }, [
+        onTranslateThrottle
+    ]);
+    const handleZoom = useCallback((event, gestureState, zoomableViewEventObject) => {
+        const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = zoomableViewEventObject;
+        onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
+        if (onScale) {
+            onScale(zoomLevel);
+        }
+    }, [
+        onScale,
+        onTranslateThrottle
+    ]);
+    const handleTapEnd = useCallback(() => {
+        if (onMode) {
+            switch (graphMode) {
+                case 'move': {
+                    return handleDoubleTap(() => {
+                        onMode('pull');
+                    });
+                }
+                case 'pull': {
+                    return handleDoubleTap(() => {
+                        onMode('select');
+                    });
+                }
+                case 'select':
+                default: {
+                    return handleDoubleTap(() => {
+                        onMode('move');
+                    });
+                }
+            }
+        }
+        else {
+            return;
+        }
+    }, [
+        graphMode,
+        handleDoubleTap,
+        onMode
+    ]);
+    const handlePointerUp = useCallback((event) => {
+        handleTapEnd();
+        if (onPointerUp) {
+            onPointerUp(event);
+        }
+    }, [
+        handleTapEnd,
+        onPointerUp
+    ]);
+    return (_jsx(View, { style: styles.container, children: _jsx(ReactNativeZoomableView, { bindToBorders: false, doubleTapDelay: 1, doubleTapZoomToCenter: false, initialOffsetX: translate.x, initialOffsetY: translate.y, initialZoom: scale, maxZoom: 1.5, minZoom: 0.5, movementSensibility: 1, onSingleTap: handlePointerUp, onTransform: handleOnTransform, onZoomAfter: handleZoom, panEnabled: true, style: styles.zoomable, visualTouchFeedbackEnabled: false, zoomStep: 0.5, children: children }) }));
+};
+Interaction.displayName = 'LincleInteractiveInteraction';
+export 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 +1,20 @@
-export { Nodes 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 } from "react/jsx-runtime";
+import { Nodes as BaseNodes } from '../../base';
+import Interaction from './Interaction';
+const Nodes = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(Interaction, { children: _jsx(BaseNodes, Object.assign({}, props, { children: children })) }));
+};
+Nodes.displayName = 'LincleInteractiveNodes';
+export { Nodes };

package/dist/components/index.d.ts

@@ -1,8 +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 Pull } from './Pull';
+export * from './Edge';
+export * from './Edges';
+export * from './Graph';
+export * from './Node';
+export * from './Nodes';

package/dist/components/index.js

@@ -1,8 +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 Pull } from './Pull';
+export * from './Edge';
+export * from './Edges';
+export * from './Graph';
+export * from './Node';
+export * from './Nodes';

package/dist/shared.d.ts

@@ -1,12 +1,12 @@
-import { type DraggableData, type EdgeControlProps, type EdgeProps, type EdgesProps, type Mode, type MoveNodeProps as SharedMoveNodeProps, type NodeProps as SharedNodeProps, type NodesProps, type Position, type PullNodeProps as SharedPullNodeProps, type PullProps as SharedPullProps, type ScaleProps, type SnapProps, type TransformProps, type TranslateProps } from '@lincle/react-interactive-shared';
-import { type GraphContextsProps as BaseGraphContextsProps, type GraphProps as BaseGraphProps, type NodeProps as BaseNodeProps } from '@lincle/react-native-base';
-import { type ReactElement, type ReactNode } from 'react';
-import { type GestureResponderEvent, type ViewStyle } from 'react-native';
-export { defaultScale, defaultSettings, disableMove, disablePull, type DraggableData, type EdgeNodeProps, GraphContext, GridContext, type GridProps, ModeContext, type ModeType, NodeContext, type Position, ScaleContext, SnapContext, TransformContext, transformDefaults, TranslateContext, translateDefaults } from '@lincle/react-interactive-shared';
+import { type EdgeControlProps, type GraphProps as InteractiveGraphProps, type MoveNodeProps as SharedMoveNodeProps, type NodeProps as SharedNodeProps, type Position, type PullNodeProps as SharedPullNodeProps, type PullProps as SharedPullProps } from '@lincle/react-interactive-shared';
+import { type EdgeProps as BaseEdgeProps, type EdgesProps as BaseEdgesProps, type NodeProps as BaseNodeProps, type NodesProps as BaseNodesProps } from '@lincle/react-native-base';
+import { type PropsWithChildren } from 'react';
+import { type GestureResponderEvent, type PanResponderGestureState, type ViewStyle } from 'react-native';
 export type DraggableEvent = GestureResponderEvent;
+export type DraggableData = PanResponderGestureState;
 export type NodeControlProps = {
     onDrag?: (event: DraggableEvent, data: DraggableData) => void;
-    onEdgeDrop?: (sourceId: number | string, targetId?: number | string) => void;
+    onEdgeDrop?: (event: DraggableEvent, sourceId: number | string, targetId?: number | string) => void;
     onSelect?: () => void;
     onStart?: (event: DraggableEvent) => void;
     onStop?: (event: DraggableEvent, data: DraggableData) => void;
@@ -17,6 +17,7 @@ export type GraphNodeControlProps = {
     onNodeStart?: (event: DraggableEvent, nodeId: number | string) => void;
     onNodeStop?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
 };
+export type NodeProps = SharedNodeProps & Omit<BaseNodeProps, 'ref'> & NodeControlProps;
 export type PullProps = Omit<EdgeProps, 'children' | 'id' | 'path' | 'targetId'> & Omit<NodeProps, 'children' | 'id'> & SharedPullProps & {
     style?: {
         pull?: ViewStyle;
@@ -28,20 +29,17 @@ export type PullNodeProps = Omit<NodeProps, 'id'> & SharedPullNodeProps & {
         pull?: ViewStyle;
     };
 };
-export type NodeProps = SharedNodeProps & BaseNodeProps & NodeControlProps;
 export type NodeContextProps = EdgeControlProps & GraphNodeControlProps;
-export type GraphContextsProps = BaseGraphContextsProps & EdgeControlProps & GraphNodeControlProps & Partial<Mode> & ScaleProps & SnapProps & TransformProps & TranslateProps;
 export type InteractionControlProps = {
-    onMouseDown?: (event: GestureResponderEvent) => void;
-    onMouseUp?: (event: GestureResponderEvent) => void;
-    onTouchEnd?: (event: GestureResponderEvent) => void;
-    onTouchStart?: (event: GestureResponderEvent) => void;
-};
-export type InteractionProps = InteractionControlProps & Pick<GraphProps, 'children'>;
-export type GraphProps = EdgeControlProps & GraphNodeControlProps & InteractionControlProps & Omit<BaseGraphProps, 'children' | 'id'> & Partial<Mode> & ScaleProps & SnapProps & TransformProps & TranslateProps & {
-    children?: Array<ReactElement<EdgesProps | NodesProps>> | ReactNode | ReactNode[];
-    id?: number | string;
+    onPointerUp?: (event: GestureResponderEvent) => void;
 };
+export type InteractionProps = PropsWithChildren<InteractionControlProps>;
+export type NodesProps = BaseNodesProps;
+export type EdgeProps = BaseEdgeProps;
+export type EdgesProps = BaseEdgesProps;
 export type MoveNodeProps = Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & BaseNodeProps & {
     readonly onDrag?: (event: GestureResponderEvent, data: DraggableData, position: Position) => void;
 };
+export type GraphProps = Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'> & GraphNodeControlProps;
+export { type Connection, type Connections, type ConnectionsProps, type EdgeNodeProps, type GridProps, type ModeType, type Position, Providers, useConnection, useConnections, useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useDiagramId, useMode, useModeGiven, useMove, useNodePositions, useOnMode, useOnNodeDrag, useOnNodeEdgeDrop, useOnNodeSelect, useOnNodeStart, useOnNodeStop, useOnScale, useOnTranslateThrottle, usePull, useScale, useSetConnection, useSnap, useTranslate } from '@lincle/react-interactive-shared';
+export { Graph as GraphBase, Marker, useUpdateEdge } from '@lincle/react-native-base';

package/dist/shared.js

@@ -1 +1,2 @@
-export { defaultScale, defaultSettings, disableMove, disablePull, GraphContext, GridContext, ModeContext, NodeContext, ScaleContext, SnapContext, TransformContext, transformDefaults, TranslateContext, translateDefaults } from '@lincle/react-interactive-shared';
+export { Providers, useConnection, useConnections, useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useDiagramId, useMode, useModeGiven, useMove, useNodePositions, useOnMode, useOnNodeDrag, useOnNodeEdgeDrop, useOnNodeSelect, useOnNodeStart, useOnNodeStop, useOnScale, useOnTranslateThrottle, usePull, useScale, useSetConnection, useSnap, useTranslate } from '@lincle/react-interactive-shared';
+export { Graph as GraphBase, Marker, useUpdateEdge } from '@lincle/react-native-base';

package/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@lincle/react-native-interactive",
-	"title": "lincle react web interactive",
+	"title": "lincle react native interactive",
 	"license": "LGPL-3.0-or-later",
-	"version": "0.4.0-next.2",
+	"version": "0.4.0-next.4",
 	"private": false,
 	"description": "A 'reactive' React node and edge generator",
 	"author": "wallzero @wallzeroblog (http://wallzero.com)",
@@ -43,20 +43,17 @@
 		"clean:dist": "rimraf dist"
 	},
 	"devDependencies": {
-		"@digest/eslint-config-jest": "^4.3.1",
-		"@digest/eslint-config-react": "^4.3.1",
-		"@digest/eslint-config-typescript": "^4.3.1",
-		"@digest/jest-junit": "^4.3.1",
-		"@digest/jest-react": "^4.3.1",
-		"@digest/jest-typescript": "^4.3.1",
-		"@digest/typescript": "^4.3.1",
+		"@digest/eslint-config-jest": "^4.4.3",
+		"@digest/eslint-config-react": "^4.4.3",
+		"@digest/eslint-config-typescript": "^4.4.3",
+		"@digest/jest-junit": "^4.4.3",
+		"@digest/jest-react": "^4.4.3",
+		"@digest/jest-typescript": "^4.4.3",
+		"@digest/typescript": "^4.4.3",
 		"@openspacelabs/react-native-zoomable-view": "^2.1.6",
-		"@types/bezier-js": "^4.1.3",
 		"@types/jest": "^29.5.12",
-		"@types/lodash.debounce": "^4.0.9",
-		"@types/lodash.throttle": "^4.1.9",
-		"@types/node": "^20.12.12",
-		"@types/react": "^18.3.2",
+		"@types/node": "^22.0.0",
+		"@types/react": "^18.3.3",
 		"@types/react-native": "^0.73.0",
 		"@types/react-test-renderer": "^18.3.0",
 		"cross-env": "^7.0.3",
@@ -65,25 +62,23 @@
 		"ncp": "^2.0.0",
 		"npm-run-all": "^4.1.5",
 		"react": "^18.3.1",
-		"react-native": "^0.74.1",
+		"react-native": "^0.74.4",
 		"react-native-draggable": "^3.3.0",
-		"react-native-reanimated": "^3.11.0",
-		"react-native-svg": "^15.3.0",
+		"react-native-reanimated": "^3.14.0",
+		"react-native-svg": "^15.4.0",
 		"react-test-renderer": "^18.3.1",
-		"rimraf": "^5.0.7"
+		"rimraf": "^6.0.1"
 	},
 	"dependencies": {
-		"@lincle/react-interactive-shared": "^0.4.0-next.2",
-		"@lincle/react-native-base": "^0.4.0-next.2",
-		"@lincle/react-shared": "^0.4.0-next.2",
-		"react-native-draggable": "^3.3.0"
+		"@lincle/react-interactive-shared": "^0.4.0-next.4",
+		"@lincle/react-native-base": "^0.4.0-next.4",
+		"@lincle/react-shared": "^0.4.0-next.4"
 	},
 	"peerDependencies": {
 		"@openspacelabs/react-native-zoomable-view": "^2.1.0",
 		"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
 		"react-native": "^0.72.0",
 		"react-native-draggable": "^3.3.0",
-		"react-native-pan-pinch-view": "^2.0.0",
 		"react-native-reanimated": "^3.0.0",
 		"react-native-svg": "^13.0.0"
 	},
@@ -94,7 +89,7 @@
 		"react",
 		"reactjs",
 		"react-dom",
-		"react-web",
+		"react-native",
 		"reactive",
 		"react-draggable",
 		"interactive",
@@ -106,5 +101,5 @@
 		"dragndrop",
 		"drag"
 	],
-	"gitHead": "c00bcd56556ee5599505cbeeebfdab06e4a8c552"
+	"gitHead": "6bbaaf166913673c8990505ea8de66a0587ce372"
 }

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

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

package/dist/components/GraphContexts/index.js

@@ -1,162 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GraphContexts as WrappedGraphContexts } from '../../base';
-import { defaultScale, defaultSettings, disableMove as defaultDisableMove, disablePull as defaultDisablePull, GridContext, ModeContext, NodeContext, ScaleContext, SnapContext, TransformContext, transformDefaults, TranslateContext, translateDefaults } from '../../shared';
-import Grid from '../Grid';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-const noGrid = [
-    1,
-    1
-];
-const GraphContexts = ({ children, disableMove = defaultDisableMove, disablePan = transformDefaults.disablePan, disablePull = defaultDisablePull, disableScale = transformDefaults.disableScale, edgeFrequency = defaultSettings.edgeFrequency, grid: givenGrid, id, line = defaultSettings.line, maxScale = transformDefaults.maxScale, minScale = transformDefaults.minScale, mode: givenMode, nodeFrequency = defaultSettings.nodeFrequency, nodeHeight = defaultSettings.height, nodeWidth = defaultSettings.width, onEdgeDrop, onNodeDrag, onNodeSelect, onNodeStart, onNodeStop, onScale, onTranslate, scale: givenScale = defaultScale, shape = defaultSettings.shape, snap, xOffset = translateDefaults.x, yOffset = translateDefaults.y }) => {
-    const [nodeControls, setNodeControls] = useState({
-        onEdgeDrop,
-        onNodeDrag,
-        onNodeSelect,
-        onNodeStart,
-        onNodeStop
-    });
-    const NodeControls = useMemo(() => {
-        return {
-            onEdgeDrop,
-            onNodeDrag,
-            onNodeSelect,
-            onNodeStart,
-            onNodeStop,
-            setNodeControls
-        };
-    }, [
-        onEdgeDrop,
-        onNodeDrag,
-        onNodeSelect,
-        onNodeStart,
-        onNodeStop,
-        setNodeControls
-    ]);
-    const transform = useMemo(() => {
-        return {
-            disablePan,
-            disableScale,
-            maxScale,
-            minScale
-        };
-    }, [
-        disablePan,
-        disableScale,
-        maxScale,
-        minScale
-    ]);
-    const [mode, setMode] = useState(givenMode);
-    const handleMode = useCallback((newMode) => {
-        setMode(newMode);
-    }, []);
-    const Mode = useMemo(() => {
-        return {
-            disableMove,
-            disablePull,
-            givenMode,
-            mode,
-            onMode: handleMode
-        };
-    }, [
-        disableMove,
-        disablePull,
-        givenMode,
-        handleMode,
-        mode
-    ]);
-    useEffect(() => {
-        handleMode(givenMode);
-    }, [
-        givenMode,
-        handleMode
-    ]);
-    const [scale, setScale] = useState(givenScale);
-    const handleScale = useCallback((newScale) => {
-        if (onScale) {
-            onScale(newScale);
-        }
-        setScale(newScale);
-    }, [
-        onScale
-    ]);
-    const Scale = useMemo(() => {
-        return {
-            onScale: handleScale,
-            scale
-        };
-    }, [
-        handleScale,
-        scale
-    ]);
-    useEffect(() => {
-        setScale(givenScale);
-    }, [
-        givenScale
-    ]);
-    const [translate, setTranslate] = useState({
-        x: xOffset,
-        y: yOffset
-    });
-    const handleTranslate = useCallback((newTranslate) => {
-        if (onTranslate) {
-            onTranslate(newTranslate);
-        }
-        setTranslate(newTranslate);
-    }, [
-        onTranslate
-    ]);
-    const Translate = useMemo(() => {
-        return {
-            onTranslate: handleTranslate,
-            translate
-        };
-    }, [
-        handleTranslate,
-        translate
-    ]);
-    useEffect(() => {
-        setTranslate({
-            x: xOffset,
-            y: yOffset
-        });
-    }, [
-        xOffset,
-        yOffset
-    ]);
-    const grid = useMemo(() => {
-        var _a;
-        return (_a = (givenGrid === false ?
-            noGrid :
-            givenGrid)) !== null && _a !== void 0 ? _a : defaultSettings.grid;
-    }, [
-        givenGrid
-    ]);
-    const derivedSnap = useMemo(() => {
-        if (snap === undefined) {
-            return givenGrid === undefined ?
-                noGrid :
-                grid;
-        }
-        if (snap === false) {
-            return noGrid;
-        }
-        if (snap === true) {
-            return grid;
-        }
-        return snap;
-    }, [
-        givenGrid,
-        grid,
-        snap
-    ]);
-    const hiddenGrid = givenGrid === false ?
-        null :
-        (_jsx(Grid, {}));
-    const staticContexts = (_jsx(NodeContext.Provider, { value: NodeControls, children: _jsx(SnapContext.Provider, { value: derivedSnap, children: _jsx(TransformContext.Provider, { value: transform, children: _jsx(ModeContext.Provider, { value: Mode, children: _jsx(ScaleContext.Provider, { value: Scale, children: _jsxs(TranslateContext.Provider, { value: Translate, children: [hiddenGrid, children] }) }) }) }) }) }));
-    const gridContext = givenGrid === false ?
-        staticContexts :
-        (_jsx(GridContext.Provider, { value: givenGrid !== null && givenGrid !== void 0 ? givenGrid : defaultSettings.grid, children: staticContexts }));
-    return (_jsx(WrappedGraphContexts, { edgeFrequency: edgeFrequency, grid: false, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, children: gridContext }));
-};
-GraphContexts.displayName = 'LincleInteractiveGraphContexts';
-export default GraphContexts;

package/dist/components/Grid/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Grid as GridBase } from '../../base';
-import { ScaleContext, TranslateContext } from '../../shared';
-import { useContext } from 'react';
-const Grid = ({ children }) => {
-    const { scale } = useContext(ScaleContext);
-    const { translate } = useContext(TranslateContext);
-    return (_jsx(GridBase, { scale: scale, xOffset: translate.x, yOffset: translate.y, children: children }));
-};
-Grid.displayName = 'LincleInteractiveGrid';
-export default Grid;