@lincle/react-native-interactive 0.4.0-next.2 → 0.4.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base.d.ts +1 -1
- package/dist/base.js +1 -1
- package/dist/components/Edge/Path/index.d.ts +1 -0
- package/dist/components/Edge/Path/index.js +1 -0
- package/dist/components/Edge/index.d.ts +2 -1
- package/dist/components/Edge/index.js +2 -1
- package/dist/components/Edges/Connections/index.d.ts +10 -0
- package/dist/components/Edges/Connections/index.js +46 -0
- package/dist/components/Edges/index.d.ts +4 -1
- package/dist/components/Edges/index.js +23 -1
- package/dist/components/{Grid → Graph/Grid}/index.d.ts +1 -1
- package/dist/components/Graph/Grid/index.js +56 -0
- package/dist/components/Graph/index.d.ts +1 -1
- package/dist/components/Graph/index.js +9 -7
- package/dist/components/Interaction/index.d.ts +1 -1
- package/dist/components/Interaction/index.js +125 -8
- package/dist/components/Node/Draggable.d.ts +41 -0
- package/dist/components/Node/Draggable.js +270 -0
- package/dist/components/Node/MoveNode/index.js +5 -3
- package/dist/components/Node/PullNode/index.js +119 -2
- package/dist/components/Node/index.d.ts +3 -1
- package/dist/components/Node/index.js +130 -16
- package/dist/components/Nodes/index.d.ts +2 -1
- package/dist/components/Nodes/index.js +3 -1
- package/dist/components/index.d.ts +6 -8
- package/dist/components/index.js +6 -8
- package/dist/shared.d.ts +15 -17
- package/dist/shared.js +2 -1
- package/package.json +20 -25
- package/dist/components/GraphContexts/index.d.ts +0 -4
- package/dist/components/GraphContexts/index.js +0 -162
- package/dist/components/Grid/index.js +0 -11
- package/dist/components/Path/index.d.ts +0 -1
- package/dist/components/Path/index.js +0 -1
- package/dist/components/Pull/index.d.ts +0 -4
- package/dist/components/Pull/index.js +0 -5
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Node as WrappedNode } from '../../../base';
|
|
3
|
+
import { useScale } from '../../../shared';
|
|
4
|
+
import Draggable from '../Draggable';
|
|
3
5
|
import { useCallback, useMemo, useState } from 'react';
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
+
const MoveNode = ({ children, disabled, height = 50, id, onDrag, shape, style: { node: nodeStyle } = {}, track = false, width = 50, x = 0, y = 0 }) => {
|
|
7
|
+
const scale = useScale();
|
|
6
8
|
const [position, setPosition] = useState({
|
|
7
9
|
x,
|
|
8
10
|
y
|
|
@@ -52,7 +54,7 @@ const MoveNode = ({ children, height = 50, id, onDrag, shape, style: { node: nod
|
|
|
52
54
|
}, [
|
|
53
55
|
nodeStyle
|
|
54
56
|
]);
|
|
55
|
-
return (_jsx(Draggable, { onDrag: handleDrag, onDragRelease: handleDragRelease, x: x, y: y, children: _jsx(WrappedNode, { height: height, id: id, shape: shape, style: style, track: track, width: width, x: position.x, y: position.y, children: children }) }));
|
|
57
|
+
return (_jsx(Draggable, { disabled: disabled, onDrag: handleDrag, onDragRelease: handleDragRelease, scale: scale, x: x, y: y, children: _jsx(WrappedNode, { height: height, id: id, shape: shape, style: style, track: track, width: width, x: position.x, y: position.y, children: children }) }));
|
|
56
58
|
};
|
|
57
59
|
MoveNode.displayName = 'LincleInteractiveMoveNode';
|
|
58
60
|
export default MoveNode;
|
|
@@ -1,5 +1,122 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useDiagramId, useNodePositions, useOnNodeEdgeDrop, useScale, useSetConnection } from '../../../shared';
|
|
3
|
+
import Draggable from '../Draggable';
|
|
4
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
5
|
+
import { StyleSheet, View } from 'react-native';
|
|
6
|
+
const PullNode = ({ disabled, height = 0, line = 'direct', onDrag, onEdgeDrop: givenOnEdgeDrop, onStart, onStop, shape = 'oval', sourceId, style: givenStyle, width = 0, x = 0, y = 0 }) => {
|
|
7
|
+
const diagramId = useDiagramId();
|
|
8
|
+
const nodePositions = useNodePositions();
|
|
9
|
+
const setConnection = useSetConnection(sourceId);
|
|
10
|
+
const onNodeEdgeDrop = useOnNodeEdgeDrop();
|
|
11
|
+
const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : onNodeEdgeDrop;
|
|
12
|
+
const scale = useScale();
|
|
13
|
+
const mouseOffset = useRef(null);
|
|
14
|
+
const position = useRef(null);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
return () => {
|
|
17
|
+
setConnection();
|
|
18
|
+
position.current = null;
|
|
19
|
+
mouseOffset.current = null;
|
|
20
|
+
};
|
|
21
|
+
}, []);
|
|
22
|
+
const handlePressIn = useCallback((event) => {
|
|
23
|
+
event.stopPropagation();
|
|
24
|
+
if (!disabled &&
|
|
25
|
+
onStart) {
|
|
26
|
+
onStart(event);
|
|
27
|
+
}
|
|
28
|
+
}, [
|
|
29
|
+
disabled,
|
|
30
|
+
onStart
|
|
31
|
+
]);
|
|
32
|
+
const handleDrag = useCallback((event, gestureState) => {
|
|
33
|
+
var _a, _b, _c, _d;
|
|
34
|
+
if (!mouseOffset.current) {
|
|
35
|
+
mouseOffset.current = {
|
|
36
|
+
x: event.nativeEvent.locationX,
|
|
37
|
+
y: event.nativeEvent.locationY
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
if (!disabled) {
|
|
41
|
+
position.current = {
|
|
42
|
+
x: (_b = x + gestureState.dx + ((_a = mouseOffset.current) === null || _a === void 0 ? void 0 : _a.x)) !== null && _b !== void 0 ? _b : 0,
|
|
43
|
+
y: (_d = y + gestureState.dy + ((_c = mouseOffset.current) === null || _c === void 0 ? void 0 : _c.y)) !== null && _d !== void 0 ? _d : 0
|
|
44
|
+
};
|
|
45
|
+
setConnection({
|
|
46
|
+
line,
|
|
47
|
+
source: {
|
|
48
|
+
height,
|
|
49
|
+
id: sourceId,
|
|
50
|
+
shape,
|
|
51
|
+
width,
|
|
52
|
+
x,
|
|
53
|
+
y
|
|
54
|
+
},
|
|
55
|
+
target: {
|
|
56
|
+
height: 0,
|
|
57
|
+
id: sourceId,
|
|
58
|
+
shape,
|
|
59
|
+
width: 0,
|
|
60
|
+
x: position.current.x,
|
|
61
|
+
y: position.current.y
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
if (onDrag) {
|
|
65
|
+
onDrag(event, gestureState);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}, [
|
|
69
|
+
disabled,
|
|
70
|
+
height,
|
|
71
|
+
line,
|
|
72
|
+
onDrag,
|
|
73
|
+
setConnection,
|
|
74
|
+
shape,
|
|
75
|
+
sourceId,
|
|
76
|
+
width,
|
|
77
|
+
x,
|
|
78
|
+
y
|
|
79
|
+
]);
|
|
80
|
+
const handleRelease = useCallback((event, data) => {
|
|
81
|
+
setConnection();
|
|
82
|
+
if (onStop) {
|
|
83
|
+
onStop(event, data);
|
|
84
|
+
}
|
|
85
|
+
if (onEdgeDrop &&
|
|
86
|
+
nodePositions &&
|
|
87
|
+
position.current) {
|
|
88
|
+
nodePositions.match(position.current.x, position.current.y).then((match) => {
|
|
89
|
+
onEdgeDrop(event, sourceId, Boolean(match) || match === 0 ?
|
|
90
|
+
match :
|
|
91
|
+
undefined);
|
|
92
|
+
}).catch(() => {
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
position.current = null;
|
|
96
|
+
mouseOffset.current = null;
|
|
97
|
+
}, [
|
|
98
|
+
nodePositions,
|
|
99
|
+
onEdgeDrop,
|
|
100
|
+
onStop,
|
|
101
|
+
setConnection,
|
|
102
|
+
sourceId
|
|
103
|
+
]);
|
|
104
|
+
const style = useMemo(() => {
|
|
105
|
+
return StyleSheet.create({
|
|
106
|
+
view: Object.assign(Object.assign({}, givenStyle), { borderRadius: shape === 'oval' ?
|
|
107
|
+
50 :
|
|
108
|
+
undefined, height,
|
|
109
|
+
width })
|
|
110
|
+
});
|
|
111
|
+
}, [
|
|
112
|
+
givenStyle,
|
|
113
|
+
height,
|
|
114
|
+
shape,
|
|
115
|
+
width
|
|
116
|
+
]);
|
|
117
|
+
return diagramId ?
|
|
118
|
+
(_jsx(Draggable, { disabled: disabled, onDrag: handleDrag, onDragRelease: handleRelease, onPressIn: handlePressIn, renderSize: height, scale: scale, shouldReverse: true, x: x, y: y, children: _jsx(View, { style: style.view }) })) :
|
|
119
|
+
null;
|
|
3
120
|
};
|
|
4
121
|
PullNode.displayName = 'LincleInteractivePullNode';
|
|
5
122
|
export default PullNode;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { type NodeProps } from '../../shared';
|
|
2
2
|
import { type FunctionComponent } from 'react';
|
|
3
3
|
declare const Node: FunctionComponent<NodeProps>;
|
|
4
|
-
export
|
|
4
|
+
export { Node };
|
|
5
|
+
export { default as MoveNode } from './MoveNode';
|
|
6
|
+
export { default as PullNode } from './PullNode';
|
|
@@ -1,19 +1,133 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useMode, useModeGiven, useMove, useOnNodeDrag, useOnNodeEdgeDrop, useOnNodeSelect, useOnNodeStart, useOnNodeStop, usePull, useSnap } from '../../shared';
|
|
13
3
|
import MoveNode from './MoveNode';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
import PullNode from './PullNode';
|
|
5
|
+
import { useCallback, useMemo, useRef } from 'react';
|
|
6
|
+
const emptySnap = [
|
|
7
|
+
1,
|
|
8
|
+
1
|
|
9
|
+
];
|
|
10
|
+
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 }) => {
|
|
11
|
+
var _a, _b;
|
|
12
|
+
const defaultHeight = useDefaultNodeHeight();
|
|
13
|
+
const defaultLine = useDefaultLine();
|
|
14
|
+
const defaultShape = useDefaultShape();
|
|
15
|
+
const defaultWidth = useDefaultNodeWidth();
|
|
16
|
+
const snap = useSnap();
|
|
17
|
+
const [snapX, snapY] = snap && Array.isArray(snap) ?
|
|
18
|
+
snap :
|
|
19
|
+
emptySnap;
|
|
20
|
+
const graphMode = useMode();
|
|
21
|
+
const graphGivenMode = useModeGiven();
|
|
22
|
+
const mode = (_a = givenMode !== null && givenMode !== void 0 ? givenMode : graphGivenMode) !== null && _a !== void 0 ? _a : graphMode;
|
|
23
|
+
const graphMove = useMove();
|
|
24
|
+
const graphPull = usePull();
|
|
25
|
+
const onNodeDrag = useOnNodeDrag();
|
|
26
|
+
const onNodeEdgeDrop = useOnNodeEdgeDrop();
|
|
27
|
+
const onNodeSelect = useOnNodeSelect();
|
|
28
|
+
const onNodeStart = useOnNodeStart();
|
|
29
|
+
const onNodeStop = useOnNodeStop();
|
|
30
|
+
const move = givenMove !== null && givenMove !== void 0 ? givenMove : graphMove;
|
|
31
|
+
const pull = givenPull !== null && givenPull !== void 0 ? givenPull : graphPull;
|
|
32
|
+
const onEdgeDrop = givenOnEdgeDrop !== null && givenOnEdgeDrop !== void 0 ? givenOnEdgeDrop : onNodeEdgeDrop;
|
|
33
|
+
const onSelect = givenOnSelect !== null && givenOnSelect !== void 0 ? givenOnSelect : onNodeSelect;
|
|
34
|
+
const pullPosition = useRef({
|
|
35
|
+
x,
|
|
36
|
+
y
|
|
37
|
+
});
|
|
38
|
+
const { height, line, shape, width } = useMemo(() => {
|
|
39
|
+
return {
|
|
40
|
+
height: givenHeight !== null && givenHeight !== void 0 ? givenHeight : defaultHeight,
|
|
41
|
+
line: givenLine !== null && givenLine !== void 0 ? givenLine : defaultLine,
|
|
42
|
+
shape: givenShape !== null && givenShape !== void 0 ? givenShape : defaultShape,
|
|
43
|
+
width: givenWidth !== null && givenWidth !== void 0 ? givenWidth : defaultWidth
|
|
44
|
+
};
|
|
45
|
+
}, [
|
|
46
|
+
defaultHeight,
|
|
47
|
+
defaultLine,
|
|
48
|
+
defaultShape,
|
|
49
|
+
defaultWidth,
|
|
50
|
+
givenHeight,
|
|
51
|
+
givenLine,
|
|
52
|
+
givenShape,
|
|
53
|
+
givenWidth
|
|
54
|
+
]);
|
|
55
|
+
const handleOnStart = useCallback((event) => {
|
|
56
|
+
if (onStart) {
|
|
57
|
+
onStart(event);
|
|
58
|
+
}
|
|
59
|
+
else if (onNodeStart) {
|
|
60
|
+
onNodeStart(event, id);
|
|
61
|
+
}
|
|
62
|
+
}, [
|
|
63
|
+
id,
|
|
64
|
+
onNodeStart,
|
|
65
|
+
onStart
|
|
66
|
+
]);
|
|
67
|
+
const handleOnDrag = useCallback((event, data) => {
|
|
68
|
+
if (onDrag) {
|
|
69
|
+
onDrag(event, data);
|
|
70
|
+
}
|
|
71
|
+
else if (onNodeDrag) {
|
|
72
|
+
onNodeDrag(event, id, data);
|
|
73
|
+
}
|
|
74
|
+
}, [
|
|
75
|
+
id,
|
|
76
|
+
onDrag,
|
|
77
|
+
onNodeDrag
|
|
78
|
+
]);
|
|
79
|
+
const handleOnStop = useCallback((event, data) => {
|
|
80
|
+
if (onStop) {
|
|
81
|
+
onStop(event, data);
|
|
82
|
+
}
|
|
83
|
+
else if (onNodeStop) {
|
|
84
|
+
onNodeStop(event, id, data);
|
|
85
|
+
}
|
|
86
|
+
}, [
|
|
87
|
+
id,
|
|
88
|
+
onNodeStop,
|
|
89
|
+
onStop
|
|
90
|
+
]);
|
|
91
|
+
const handleMoveStart = useCallback((event) => {
|
|
92
|
+
handleOnStart(event);
|
|
93
|
+
}, [
|
|
94
|
+
handleOnStart
|
|
95
|
+
]);
|
|
96
|
+
const handleMoveDrag = useCallback((event, data, position) => {
|
|
97
|
+
pullPosition.current = {
|
|
98
|
+
x: position.x,
|
|
99
|
+
y: position.y
|
|
100
|
+
};
|
|
101
|
+
handleOnDrag(event, data);
|
|
102
|
+
}, [
|
|
103
|
+
handleOnDrag
|
|
104
|
+
]);
|
|
105
|
+
const handleMoveStop = useCallback((event, data) => {
|
|
106
|
+
handleOnStop(event, data);
|
|
107
|
+
}, [
|
|
108
|
+
handleOnStop
|
|
109
|
+
]);
|
|
110
|
+
const pullNode = useMemo(() => {
|
|
111
|
+
return mode === 'pull' && pull ?
|
|
112
|
+
(_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 })) :
|
|
113
|
+
null;
|
|
114
|
+
}, [
|
|
115
|
+
mode
|
|
116
|
+
]);
|
|
117
|
+
const snapper = useMemo(() => {
|
|
118
|
+
return {
|
|
119
|
+
x: Math.ceil((x !== null && x !== void 0 ? x : 0) / snapX) * snapX,
|
|
120
|
+
y: Math.ceil((y !== null && y !== void 0 ? y : 0) / snapY) * snapY
|
|
121
|
+
};
|
|
122
|
+
}, [
|
|
123
|
+
snapX,
|
|
124
|
+
snapY,
|
|
125
|
+
x,
|
|
126
|
+
y
|
|
127
|
+
]);
|
|
128
|
+
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] }));
|
|
17
129
|
};
|
|
18
130
|
Node.displayName = 'LincleInteractiveNode';
|
|
19
|
-
export
|
|
131
|
+
export { Node };
|
|
132
|
+
export { default as MoveNode } from './MoveNode';
|
|
133
|
+
export { default as PullNode } from './PullNode';
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { Nodes } from '../../base';
|
|
2
|
+
export { Nodes };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export { default as Nodes } from './Nodes';
|
|
8
|
-
export { default as Pull } from './Pull';
|
|
1
|
+
export * from './Edge';
|
|
2
|
+
export * from './Edges';
|
|
3
|
+
export * from './Graph';
|
|
4
|
+
export * from './Interaction';
|
|
5
|
+
export * from './Node';
|
|
6
|
+
export * from './Nodes';
|
package/dist/components/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export { default as Nodes } from './Nodes';
|
|
8
|
-
export { default as Pull } from './Pull';
|
|
1
|
+
export * from './Edge';
|
|
2
|
+
export * from './Edges';
|
|
3
|
+
export * from './Graph';
|
|
4
|
+
export * from './Interaction';
|
|
5
|
+
export * from './Node';
|
|
6
|
+
export * from './Nodes';
|
package/dist/shared.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type
|
|
3
|
-
import { type
|
|
4
|
-
import { type GestureResponderEvent, type ViewStyle } from 'react-native';
|
|
5
|
-
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';
|
|
1
|
+
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';
|
|
2
|
+
import { type EdgeProps as BaseEdgeProps, type EdgesProps as BaseEdgesProps, type NodeProps as BaseNodeProps, type NodesProps as BaseNodesProps } from '@lincle/react-native-base';
|
|
3
|
+
import { type PropsWithChildren } from 'react';
|
|
4
|
+
import { type GestureResponderEvent, type PanResponderGestureState, type ViewStyle } from 'react-native';
|
|
6
5
|
export type DraggableEvent = GestureResponderEvent;
|
|
6
|
+
export type DraggableData = PanResponderGestureState;
|
|
7
7
|
export type NodeControlProps = {
|
|
8
8
|
onDrag?: (event: DraggableEvent, data: DraggableData) => void;
|
|
9
|
-
onEdgeDrop?: (sourceId: number | string, targetId?: number | string) => void;
|
|
9
|
+
onEdgeDrop?: (event: DraggableEvent, sourceId: number | string, targetId?: number | string) => void;
|
|
10
10
|
onSelect?: () => void;
|
|
11
11
|
onStart?: (event: DraggableEvent) => void;
|
|
12
12
|
onStop?: (event: DraggableEvent, data: DraggableData) => void;
|
|
@@ -17,6 +17,7 @@ export type GraphNodeControlProps = {
|
|
|
17
17
|
onNodeStart?: (event: DraggableEvent, nodeId: number | string) => void;
|
|
18
18
|
onNodeStop?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
|
|
19
19
|
};
|
|
20
|
+
export type NodeProps = SharedNodeProps & Omit<BaseNodeProps, 'ref'> & NodeControlProps;
|
|
20
21
|
export type PullProps = Omit<EdgeProps, 'children' | 'id' | 'path' | 'targetId'> & Omit<NodeProps, 'children' | 'id'> & SharedPullProps & {
|
|
21
22
|
style?: {
|
|
22
23
|
pull?: ViewStyle;
|
|
@@ -28,20 +29,17 @@ export type PullNodeProps = Omit<NodeProps, 'id'> & SharedPullNodeProps & {
|
|
|
28
29
|
pull?: ViewStyle;
|
|
29
30
|
};
|
|
30
31
|
};
|
|
31
|
-
export type NodeProps = SharedNodeProps & BaseNodeProps & NodeControlProps;
|
|
32
32
|
export type NodeContextProps = EdgeControlProps & GraphNodeControlProps;
|
|
33
|
-
export type GraphContextsProps = BaseGraphContextsProps & EdgeControlProps & GraphNodeControlProps & Partial<Mode> & ScaleProps & SnapProps & TransformProps & TranslateProps;
|
|
34
33
|
export type InteractionControlProps = {
|
|
35
|
-
|
|
36
|
-
onMouseUp?: (event: GestureResponderEvent) => void;
|
|
37
|
-
onTouchEnd?: (event: GestureResponderEvent) => void;
|
|
38
|
-
onTouchStart?: (event: GestureResponderEvent) => void;
|
|
39
|
-
};
|
|
40
|
-
export type InteractionProps = InteractionControlProps & Pick<GraphProps, 'children'>;
|
|
41
|
-
export type GraphProps = EdgeControlProps & GraphNodeControlProps & InteractionControlProps & Omit<BaseGraphProps, 'children' | 'id'> & Partial<Mode> & ScaleProps & SnapProps & TransformProps & TranslateProps & {
|
|
42
|
-
children?: Array<ReactElement<EdgesProps | NodesProps>> | ReactNode | ReactNode[];
|
|
43
|
-
id?: number | string;
|
|
34
|
+
onPointerUp?: (event: GestureResponderEvent) => void;
|
|
44
35
|
};
|
|
36
|
+
export type InteractionProps = PropsWithChildren<InteractionControlProps>;
|
|
37
|
+
export type NodesProps = BaseNodesProps;
|
|
38
|
+
export type EdgeProps = BaseEdgeProps;
|
|
39
|
+
export type EdgesProps = BaseEdgesProps;
|
|
45
40
|
export type MoveNodeProps = Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & BaseNodeProps & {
|
|
46
41
|
readonly onDrag?: (event: GestureResponderEvent, data: DraggableData, position: Position) => void;
|
|
47
42
|
};
|
|
43
|
+
export type GraphProps = Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'> & GraphNodeControlProps;
|
|
44
|
+
export { type Connection, type Connections, 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';
|
|
45
|
+
export { Graph as GraphBase, Marker, useUpdateEdge } from '@lincle/react-native-base';
|
package/dist/shared.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {
|
|
1
|
+
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';
|
|
2
|
+
export { Graph as GraphBase, Marker, useUpdateEdge } from '@lincle/react-native-base';
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lincle/react-native-interactive",
|
|
3
|
-
"title": "lincle react
|
|
3
|
+
"title": "lincle react native interactive",
|
|
4
4
|
"license": "LGPL-3.0-or-later",
|
|
5
|
-
"version": "0.4.0-next.
|
|
5
|
+
"version": "0.4.0-next.3",
|
|
6
6
|
"private": false,
|
|
7
7
|
"description": "A 'reactive' React node and edge generator",
|
|
8
8
|
"author": "wallzero @wallzeroblog (http://wallzero.com)",
|
|
@@ -43,20 +43,17 @@
|
|
|
43
43
|
"clean:dist": "rimraf dist"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@digest/eslint-config-jest": "^4.3
|
|
47
|
-
"@digest/eslint-config-react": "^4.3
|
|
48
|
-
"@digest/eslint-config-typescript": "^4.3
|
|
49
|
-
"@digest/jest-junit": "^4.3
|
|
50
|
-
"@digest/jest-react": "^4.3
|
|
51
|
-
"@digest/jest-typescript": "^4.3
|
|
52
|
-
"@digest/typescript": "^4.3
|
|
46
|
+
"@digest/eslint-config-jest": "^4.4.3",
|
|
47
|
+
"@digest/eslint-config-react": "^4.4.3",
|
|
48
|
+
"@digest/eslint-config-typescript": "^4.4.3",
|
|
49
|
+
"@digest/jest-junit": "^4.4.3",
|
|
50
|
+
"@digest/jest-react": "^4.4.3",
|
|
51
|
+
"@digest/jest-typescript": "^4.4.3",
|
|
52
|
+
"@digest/typescript": "^4.4.3",
|
|
53
53
|
"@openspacelabs/react-native-zoomable-view": "^2.1.6",
|
|
54
|
-
"@types/bezier-js": "^4.1.3",
|
|
55
54
|
"@types/jest": "^29.5.12",
|
|
56
|
-
"@types/
|
|
57
|
-
"@types/
|
|
58
|
-
"@types/node": "^20.12.12",
|
|
59
|
-
"@types/react": "^18.3.2",
|
|
55
|
+
"@types/node": "^20.14.11",
|
|
56
|
+
"@types/react": "^18.3.3",
|
|
60
57
|
"@types/react-native": "^0.73.0",
|
|
61
58
|
"@types/react-test-renderer": "^18.3.0",
|
|
62
59
|
"cross-env": "^7.0.3",
|
|
@@ -65,25 +62,23 @@
|
|
|
65
62
|
"ncp": "^2.0.0",
|
|
66
63
|
"npm-run-all": "^4.1.5",
|
|
67
64
|
"react": "^18.3.1",
|
|
68
|
-
"react-native": "^0.74.
|
|
65
|
+
"react-native": "^0.74.3",
|
|
69
66
|
"react-native-draggable": "^3.3.0",
|
|
70
|
-
"react-native-reanimated": "^3.
|
|
71
|
-
"react-native-svg": "^15.
|
|
67
|
+
"react-native-reanimated": "^3.14.0",
|
|
68
|
+
"react-native-svg": "^15.4.0",
|
|
72
69
|
"react-test-renderer": "^18.3.1",
|
|
73
|
-
"rimraf": "^
|
|
70
|
+
"rimraf": "^6.0.1"
|
|
74
71
|
},
|
|
75
72
|
"dependencies": {
|
|
76
|
-
"@lincle/react-interactive-shared": "^0.4.0-next.
|
|
77
|
-
"@lincle/react-native-base": "^0.4.0-next.
|
|
78
|
-
"@lincle/react-shared": "^0.4.0-next.
|
|
79
|
-
"react-native-draggable": "^3.3.0"
|
|
73
|
+
"@lincle/react-interactive-shared": "^0.4.0-next.3",
|
|
74
|
+
"@lincle/react-native-base": "^0.4.0-next.3",
|
|
75
|
+
"@lincle/react-shared": "^0.4.0-next.3"
|
|
80
76
|
},
|
|
81
77
|
"peerDependencies": {
|
|
82
78
|
"@openspacelabs/react-native-zoomable-view": "^2.1.0",
|
|
83
79
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
|
84
80
|
"react-native": "^0.72.0",
|
|
85
81
|
"react-native-draggable": "^3.3.0",
|
|
86
|
-
"react-native-pan-pinch-view": "^2.0.0",
|
|
87
82
|
"react-native-reanimated": "^3.0.0",
|
|
88
83
|
"react-native-svg": "^13.0.0"
|
|
89
84
|
},
|
|
@@ -94,7 +89,7 @@
|
|
|
94
89
|
"react",
|
|
95
90
|
"reactjs",
|
|
96
91
|
"react-dom",
|
|
97
|
-
"react-
|
|
92
|
+
"react-native",
|
|
98
93
|
"reactive",
|
|
99
94
|
"react-draggable",
|
|
100
95
|
"interactive",
|
|
@@ -106,5 +101,5 @@
|
|
|
106
101
|
"dragndrop",
|
|
107
102
|
"drag"
|
|
108
103
|
],
|
|
109
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "0d9cda53a8175e6d2a64d7b3b81828fc98007bfb"
|
|
110
105
|
}
|