@lincle/react-native-interactive 0.4.0-next.12 → 0.4.0-next.13
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/components/Graph/Grid/index.js +3 -3
- package/dist/components/Interaction/index.js +9 -11
- package/dist/components/Node/Draggable.js +4 -3
- package/dist/components/Node/PullNode/index.js +1 -1
- package/dist/components/Node/index.js +1 -1
- package/dist/shared.d.ts +24 -24
- package/package.json +103 -103
|
@@ -31,15 +31,15 @@ const Grid = ({ children }) => {
|
|
|
31
31
|
const child = useMemo(() => {
|
|
32
32
|
if (!children) {
|
|
33
33
|
switch (mode) {
|
|
34
|
+
case 'move': {
|
|
35
|
+
return circle;
|
|
36
|
+
}
|
|
34
37
|
case 'pull': {
|
|
35
38
|
return line;
|
|
36
39
|
}
|
|
37
40
|
case 'select': {
|
|
38
41
|
return plus;
|
|
39
42
|
}
|
|
40
|
-
case 'move': {
|
|
41
|
-
return circle;
|
|
42
|
-
}
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
return children;
|
|
@@ -18,13 +18,12 @@ const useDoubleTap = () => {
|
|
|
18
18
|
if (timer.current) {
|
|
19
19
|
clearTimeout(timer.current);
|
|
20
20
|
timer.current = null;
|
|
21
|
-
|
|
21
|
+
callback();
|
|
22
22
|
}
|
|
23
23
|
else {
|
|
24
24
|
timer.current = setTimeout(() => {
|
|
25
25
|
timer.current = null;
|
|
26
26
|
}, threshold);
|
|
27
|
-
return;
|
|
28
27
|
}
|
|
29
28
|
}, []);
|
|
30
29
|
};
|
|
@@ -44,11 +43,12 @@ const styles = StyleSheet.create({
|
|
|
44
43
|
}
|
|
45
44
|
});
|
|
46
45
|
const Interaction = ({ onPointerUp }) => {
|
|
46
|
+
var _a;
|
|
47
47
|
const scale = useScale();
|
|
48
48
|
const translate = useTranslate();
|
|
49
49
|
const onScale = useOnScale();
|
|
50
50
|
const onTranslateThrottle = useOnTranslateThrottle();
|
|
51
|
-
const graphMode = useMode();
|
|
51
|
+
const graphMode = (_a = useMode()) !== null && _a !== void 0 ? _a : 'move';
|
|
52
52
|
const onMode = useOnMode();
|
|
53
53
|
const handleDoubleTap = useDoubleTap();
|
|
54
54
|
const handleOnTransform = useCallback((event) => {
|
|
@@ -71,26 +71,24 @@ const Interaction = ({ onPointerUp }) => {
|
|
|
71
71
|
if (onMode) {
|
|
72
72
|
switch (graphMode) {
|
|
73
73
|
case 'move': {
|
|
74
|
-
|
|
74
|
+
handleDoubleTap(() => {
|
|
75
75
|
onMode('pull');
|
|
76
76
|
});
|
|
77
|
+
return;
|
|
77
78
|
}
|
|
78
79
|
case 'pull': {
|
|
79
|
-
|
|
80
|
+
handleDoubleTap(() => {
|
|
80
81
|
onMode('select');
|
|
81
82
|
});
|
|
83
|
+
return;
|
|
82
84
|
}
|
|
83
|
-
case 'select':
|
|
84
|
-
|
|
85
|
-
return handleDoubleTap(() => {
|
|
85
|
+
case 'select': {
|
|
86
|
+
handleDoubleTap(() => {
|
|
86
87
|
onMode('move');
|
|
87
88
|
});
|
|
88
89
|
}
|
|
89
90
|
}
|
|
90
91
|
}
|
|
91
|
-
else {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
92
|
}, [
|
|
95
93
|
graphMode,
|
|
96
94
|
handleDoubleTap,
|
|
@@ -240,17 +240,18 @@ const Draggable = ({ animatedViewProps, children, debug = false, disabled = fals
|
|
|
240
240
|
onRelease
|
|
241
241
|
]);
|
|
242
242
|
const getDebugView = useCallback(() => {
|
|
243
|
+
var _a, _b;
|
|
243
244
|
const { height, width } = Dimensions.get('window');
|
|
244
245
|
const far = 9999;
|
|
245
|
-
const constrained = minX
|
|
246
|
+
const constrained = (_b = (_a = minX !== null && minX !== void 0 ? minX : maxX) !== null && _a !== void 0 ? _a : minY) !== null && _b !== void 0 ? _b : maxY;
|
|
246
247
|
if (!constrained) {
|
|
247
248
|
return null;
|
|
248
249
|
}
|
|
249
|
-
const left = minX
|
|
250
|
+
const left = minX !== null && minX !== void 0 ? minX : -far;
|
|
250
251
|
const right = maxX ?
|
|
251
252
|
width - maxX :
|
|
252
253
|
-far;
|
|
253
|
-
const top = minY
|
|
254
|
+
const top = minY !== null && minY !== void 0 ? minY : -far;
|
|
254
255
|
const bottom = maxY ?
|
|
255
256
|
height - maxY :
|
|
256
257
|
-far;
|
|
@@ -115,7 +115,7 @@ const PullNode = ({ disabled, height = 0, line = 'direct', onDrag, onEdgeDrop: g
|
|
|
115
115
|
width
|
|
116
116
|
]);
|
|
117
117
|
return diagramId ?
|
|
118
|
-
|
|
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
119
|
null;
|
|
120
120
|
};
|
|
121
121
|
PullNode.displayName = 'LincleInteractivePullNode';
|
|
@@ -109,7 +109,7 @@ const Node = ({ children, height: givenHeight, id, line: givenLine, mode: givenM
|
|
|
109
109
|
]);
|
|
110
110
|
const pullNode = useMemo(() => {
|
|
111
111
|
return mode === 'pull' && pull ?
|
|
112
|
-
|
|
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
113
|
null;
|
|
114
114
|
}, [
|
|
115
115
|
mode
|
package/dist/shared.d.ts
CHANGED
|
@@ -1,9 +1,26 @@
|
|
|
1
|
-
import { type EdgeControlProps, type GraphProps as InteractiveGraphProps, type MoveNodeProps as SharedMoveNodeProps, type NodeProps as SharedNodeProps, type
|
|
1
|
+
import { type EdgeControlProps, type GraphProps as InteractiveGraphProps, type Position, type MoveNodeProps as SharedMoveNodeProps, type NodeProps as SharedNodeProps, type PullNodeProps as SharedPullNodeProps, type PullProps as SharedPullProps } from '@lincle/react-interactive-shared';
|
|
2
2
|
import { type EdgeProps as BaseEdgeProps, type EdgesProps as BaseEdgesProps, type NodeProps as BaseNodeProps, type NodesProps as BaseNodesProps } from '@lincle/react-native-base';
|
|
3
3
|
import { type PropsWithChildren } from 'react';
|
|
4
4
|
import { type GestureResponderEvent, type PanResponderGestureState, type ViewStyle } from 'react-native';
|
|
5
|
-
export type DraggableEvent = GestureResponderEvent;
|
|
6
5
|
export type DraggableData = PanResponderGestureState;
|
|
6
|
+
export type DraggableEvent = GestureResponderEvent;
|
|
7
|
+
export type EdgeProps = BaseEdgeProps;
|
|
8
|
+
export type EdgesProps = BaseEdgesProps;
|
|
9
|
+
export type GraphNodeControlProps = {
|
|
10
|
+
onNodeDrag?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
|
|
11
|
+
onNodeSelect?: (nodeId: number | string) => void;
|
|
12
|
+
onNodeStart?: (event: DraggableEvent, nodeId: number | string) => void;
|
|
13
|
+
onNodeStop?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
|
|
14
|
+
};
|
|
15
|
+
export type GraphProps = GraphNodeControlProps & Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'>;
|
|
16
|
+
export type InteractionControlProps = {
|
|
17
|
+
onPointerUp?: (event: GestureResponderEvent) => void;
|
|
18
|
+
};
|
|
19
|
+
export type InteractionProps = PropsWithChildren<InteractionControlProps>;
|
|
20
|
+
export type MoveNodeProps = BaseNodeProps & Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & {
|
|
21
|
+
readonly onDrag?: (event: GestureResponderEvent, data: DraggableData, position: Position) => void;
|
|
22
|
+
};
|
|
23
|
+
export type NodeContextProps = EdgeControlProps & GraphNodeControlProps;
|
|
7
24
|
export type NodeControlProps = {
|
|
8
25
|
onDrag?: (event: DraggableEvent, data: DraggableData) => void;
|
|
9
26
|
onEdgeDrop?: (event: DraggableEvent, sourceId: number | string, targetId?: number | string) => void;
|
|
@@ -11,35 +28,18 @@ export type NodeControlProps = {
|
|
|
11
28
|
onStart?: (event: DraggableEvent) => void;
|
|
12
29
|
onStop?: (event: DraggableEvent, data: DraggableData) => void;
|
|
13
30
|
};
|
|
14
|
-
export type
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
onNodeStart?: (event: DraggableEvent, nodeId: number | string) => void;
|
|
18
|
-
onNodeStop?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
|
|
19
|
-
};
|
|
20
|
-
export type NodeProps = SharedNodeProps & Omit<BaseNodeProps, 'ref'> & NodeControlProps;
|
|
21
|
-
export type PullProps = Omit<EdgeProps, 'children' | 'id' | 'path' | 'targetId'> & Omit<NodeProps, 'children' | 'id'> & SharedPullProps & {
|
|
31
|
+
export type NodeProps = NodeControlProps & Omit<BaseNodeProps, 'ref'> & SharedNodeProps;
|
|
32
|
+
export type NodesProps = BaseNodesProps;
|
|
33
|
+
export type PullNodeProps = Omit<NodeProps, 'id'> & SharedPullNodeProps & {
|
|
22
34
|
style?: {
|
|
35
|
+
node?: ViewStyle;
|
|
23
36
|
pull?: ViewStyle;
|
|
24
37
|
};
|
|
25
38
|
};
|
|
26
|
-
export type
|
|
39
|
+
export type PullProps = Omit<EdgeProps, 'children' | 'id' | 'path' | 'targetId'> & Omit<NodeProps, 'children' | 'id'> & SharedPullProps & {
|
|
27
40
|
style?: {
|
|
28
|
-
node?: ViewStyle;
|
|
29
41
|
pull?: ViewStyle;
|
|
30
42
|
};
|
|
31
43
|
};
|
|
32
|
-
export type NodeContextProps = EdgeControlProps & GraphNodeControlProps;
|
|
33
|
-
export type InteractionControlProps = {
|
|
34
|
-
onPointerUp?: (event: GestureResponderEvent) => void;
|
|
35
|
-
};
|
|
36
|
-
export type InteractionProps = PropsWithChildren<InteractionControlProps>;
|
|
37
|
-
export type NodesProps = BaseNodesProps;
|
|
38
|
-
export type EdgeProps = BaseEdgeProps;
|
|
39
|
-
export type EdgesProps = BaseEdgesProps;
|
|
40
|
-
export type MoveNodeProps = Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & BaseNodeProps & {
|
|
41
|
-
readonly onDrag?: (event: GestureResponderEvent, data: DraggableData, position: Position) => void;
|
|
42
|
-
};
|
|
43
|
-
export type GraphProps = Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'> & GraphNodeControlProps;
|
|
44
44
|
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';
|
|
45
45
|
export { Graph as GraphBase, Marker, useUpdateEdge } from '@lincle/react-native-base';
|
package/package.json
CHANGED
|
@@ -1,105 +1,105 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
2
|
+
"name": "@lincle/react-native-interactive",
|
|
3
|
+
"title": "lincle react native interactive",
|
|
4
|
+
"license": "LGPL-3.0-or-later",
|
|
5
|
+
"version": "0.4.0-next.13",
|
|
6
|
+
"private": false,
|
|
7
|
+
"description": "A 'reactive' React node and edge generator",
|
|
8
|
+
"author": "wallzero @wallzeroblog (http://wallzero.com)",
|
|
9
|
+
"contributors": [
|
|
10
|
+
{
|
|
11
|
+
"name": "Connor Schlesiger",
|
|
12
|
+
"email": "connor@schlesiger.ca",
|
|
13
|
+
"position": "Initial and Lead Developer"
|
|
14
|
+
}
|
|
15
|
+
],
|
|
16
|
+
"main": "dist/index.js",
|
|
17
|
+
"types": "dist/index.d.ts",
|
|
18
|
+
"files": [
|
|
19
|
+
"dist/",
|
|
20
|
+
"COPYING.md",
|
|
21
|
+
"COPYING.LESSER.md"
|
|
22
|
+
],
|
|
23
|
+
"homepage": "https://gitlab.com/digested/lincle/tree/master/packages/react-native-interactive/",
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "https://gitlab.com/digested/lincle.git"
|
|
27
|
+
},
|
|
28
|
+
"bugs": {
|
|
29
|
+
"url": "https://gitlab.com/digested/lincle/issues"
|
|
30
|
+
},
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "run-s clean:dist build:prod",
|
|
33
|
+
"build:prod": "tsc -p ./tsconfig.json",
|
|
34
|
+
"build:watch": "run-s clean:dist build:prod build:watch:tsc",
|
|
35
|
+
"build:watch:tsc": "tsc -p ./tsconfig.json --watch --pretty --preserveWatchOutput",
|
|
36
|
+
"----------------------------------------------------------------": "",
|
|
37
|
+
"build:prod:config": "",
|
|
38
|
+
"---------------------------------------------------------------": "",
|
|
39
|
+
"lint": "run-p lint:es",
|
|
40
|
+
"lint:es": "eslint",
|
|
41
|
+
"clean": "run-s clean:dist clean:node_modules",
|
|
42
|
+
"clean:node_modules": "rimraf node_modules yarn.lock package-lock.json",
|
|
43
|
+
"clean:dist": "rimraf dist"
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@digest/eslint-config-jest": "^4.13.0",
|
|
47
|
+
"@digest/eslint-config-react": "^4.13.0",
|
|
48
|
+
"@digest/eslint-config-typescript": "^4.13.0",
|
|
49
|
+
"@digest/jest-junit": "^4.13.0",
|
|
50
|
+
"@digest/jest-react": "^4.13.0",
|
|
51
|
+
"@digest/jest-typescript": "^4.13.0",
|
|
52
|
+
"@digest/typescript": "^4.13.0",
|
|
53
|
+
"@openspacelabs/react-native-zoomable-view": "^2.1.6",
|
|
54
|
+
"@types/jest": "^29.5.14",
|
|
55
|
+
"@types/node": "^22.10.1",
|
|
56
|
+
"@types/react": "^18.3.12",
|
|
57
|
+
"@types/react-native": "^0.73.0",
|
|
58
|
+
"@types/react-test-renderer": "^18.3.0",
|
|
59
|
+
"cross-env": "^7.0.3",
|
|
60
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
61
|
+
"jest-environment-jsdom-global": "^4.0.0",
|
|
62
|
+
"ncp": "^2.0.0",
|
|
63
|
+
"npm-run-all": "^4.1.5",
|
|
64
|
+
"react": "^18.3.1",
|
|
65
|
+
"react-native": "^0.76.3",
|
|
66
|
+
"react-native-draggable": "^3.3.0",
|
|
67
|
+
"react-native-reanimated": "^3.16.3",
|
|
68
|
+
"react-native-svg": "^15.9.0",
|
|
69
|
+
"react-test-renderer": "^18.3.1",
|
|
70
|
+
"rimraf": "^6.0.1"
|
|
71
|
+
},
|
|
72
|
+
"dependencies": {
|
|
73
|
+
"@lincle/react-interactive-shared": "^0.4.0-next.13",
|
|
74
|
+
"@lincle/react-native-base": "^0.4.0-next.13",
|
|
75
|
+
"@lincle/react-shared": "^0.4.0-next.13"
|
|
76
|
+
},
|
|
77
|
+
"peerDependencies": {
|
|
78
|
+
"@openspacelabs/react-native-zoomable-view": "^2.1.0",
|
|
79
|
+
"react": "^18.0.0",
|
|
80
|
+
"react-native": "^0.76.0",
|
|
81
|
+
"react-native-draggable": "^3.3.0",
|
|
82
|
+
"react-native-reanimated": "^3.0.0",
|
|
83
|
+
"react-native-svg": "^15.0.0"
|
|
84
|
+
},
|
|
85
|
+
"keywords": [
|
|
86
|
+
"library",
|
|
87
|
+
"lincle",
|
|
88
|
+
"typescript",
|
|
89
|
+
"react",
|
|
90
|
+
"reactjs",
|
|
91
|
+
"react-dom",
|
|
92
|
+
"react-native",
|
|
93
|
+
"reactive",
|
|
94
|
+
"react-draggable",
|
|
95
|
+
"interactive",
|
|
96
|
+
"graph",
|
|
97
|
+
"diagram",
|
|
98
|
+
"dag",
|
|
99
|
+
"acyclical graph",
|
|
100
|
+
"cyclical graph",
|
|
101
|
+
"dragndrop",
|
|
102
|
+
"drag"
|
|
103
|
+
],
|
|
104
|
+
"gitHead": "84d45ca98dd0d6589c697cc7457a897fa777340f"
|
|
105
105
|
}
|