@lincle/react-native-interactive 0.4.0-next.1 → 0.4.0-next.11
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 +4 -0
- package/dist/components/Edges/Connections/index.js +40 -0
- package/dist/components/Edges/index.d.ts +4 -1
- package/dist/components/Edges/index.js +32 -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 -6
- package/dist/components/Interaction/index.js +101 -7
- package/dist/components/Node/Draggable.d.ts +41 -0
- package/dist/components/Node/Draggable.js +271 -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/Interaction/index.d.ts +4 -0
- package/dist/components/Nodes/Interaction/index.js +27 -0
- package/dist/components/Nodes/index.d.ts +4 -1
- package/dist/components/Nodes/index.js +20 -1
- package/dist/components/index.d.ts +5 -8
- package/dist/components/index.js +5 -8
- package/dist/shared.d.ts +15 -17
- package/dist/shared.js +2 -1
- package/package.json +23 -28
- 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,162 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { GraphContexts as WrappedGraphContexts } from '../../base';
|
|
3
|
-
import { defaultScale, defaultSettings, disableMove as defaultDisableMove, disablePull as defaultDisablePull, GridContext, ModeContext, NodeContext, ScaleContext, SnapContext, TransformContext, transformDefaults, TranslateContext, translateDefaults } from '../../shared';
|
|
4
|
-
import Grid from '../Grid';
|
|
5
|
-
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
6
|
-
const noGrid = [
|
|
7
|
-
1,
|
|
8
|
-
1
|
|
9
|
-
];
|
|
10
|
-
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 }) => {
|
|
11
|
-
const [nodeControls, setNodeControls] = useState({
|
|
12
|
-
onEdgeDrop,
|
|
13
|
-
onNodeDrag,
|
|
14
|
-
onNodeSelect,
|
|
15
|
-
onNodeStart,
|
|
16
|
-
onNodeStop
|
|
17
|
-
});
|
|
18
|
-
const NodeControls = useMemo(() => {
|
|
19
|
-
return {
|
|
20
|
-
onEdgeDrop,
|
|
21
|
-
onNodeDrag,
|
|
22
|
-
onNodeSelect,
|
|
23
|
-
onNodeStart,
|
|
24
|
-
onNodeStop,
|
|
25
|
-
setNodeControls
|
|
26
|
-
};
|
|
27
|
-
}, [
|
|
28
|
-
onEdgeDrop,
|
|
29
|
-
onNodeDrag,
|
|
30
|
-
onNodeSelect,
|
|
31
|
-
onNodeStart,
|
|
32
|
-
onNodeStop,
|
|
33
|
-
setNodeControls
|
|
34
|
-
]);
|
|
35
|
-
const transform = useMemo(() => {
|
|
36
|
-
return {
|
|
37
|
-
disablePan,
|
|
38
|
-
disableScale,
|
|
39
|
-
maxScale,
|
|
40
|
-
minScale
|
|
41
|
-
};
|
|
42
|
-
}, [
|
|
43
|
-
disablePan,
|
|
44
|
-
disableScale,
|
|
45
|
-
maxScale,
|
|
46
|
-
minScale
|
|
47
|
-
]);
|
|
48
|
-
const [mode, setMode] = useState(givenMode);
|
|
49
|
-
const handleMode = useCallback((newMode) => {
|
|
50
|
-
setMode(newMode);
|
|
51
|
-
}, []);
|
|
52
|
-
const Mode = useMemo(() => {
|
|
53
|
-
return {
|
|
54
|
-
disableMove,
|
|
55
|
-
disablePull,
|
|
56
|
-
givenMode,
|
|
57
|
-
mode,
|
|
58
|
-
onMode: handleMode
|
|
59
|
-
};
|
|
60
|
-
}, [
|
|
61
|
-
disableMove,
|
|
62
|
-
disablePull,
|
|
63
|
-
givenMode,
|
|
64
|
-
handleMode,
|
|
65
|
-
mode
|
|
66
|
-
]);
|
|
67
|
-
useEffect(() => {
|
|
68
|
-
handleMode(givenMode);
|
|
69
|
-
}, [
|
|
70
|
-
givenMode,
|
|
71
|
-
handleMode
|
|
72
|
-
]);
|
|
73
|
-
const [scale, setScale] = useState(givenScale);
|
|
74
|
-
const handleScale = useCallback((newScale) => {
|
|
75
|
-
if (onScale) {
|
|
76
|
-
onScale(newScale);
|
|
77
|
-
}
|
|
78
|
-
setScale(newScale);
|
|
79
|
-
}, [
|
|
80
|
-
onScale
|
|
81
|
-
]);
|
|
82
|
-
const Scale = useMemo(() => {
|
|
83
|
-
return {
|
|
84
|
-
onScale: handleScale,
|
|
85
|
-
scale
|
|
86
|
-
};
|
|
87
|
-
}, [
|
|
88
|
-
handleScale,
|
|
89
|
-
scale
|
|
90
|
-
]);
|
|
91
|
-
useEffect(() => {
|
|
92
|
-
setScale(givenScale);
|
|
93
|
-
}, [
|
|
94
|
-
givenScale
|
|
95
|
-
]);
|
|
96
|
-
const [translate, setTranslate] = useState({
|
|
97
|
-
x: xOffset,
|
|
98
|
-
y: yOffset
|
|
99
|
-
});
|
|
100
|
-
const handleTranslate = useCallback((newTranslate) => {
|
|
101
|
-
if (onTranslate) {
|
|
102
|
-
onTranslate(newTranslate);
|
|
103
|
-
}
|
|
104
|
-
setTranslate(newTranslate);
|
|
105
|
-
}, [
|
|
106
|
-
onTranslate
|
|
107
|
-
]);
|
|
108
|
-
const Translate = useMemo(() => {
|
|
109
|
-
return {
|
|
110
|
-
onTranslate: handleTranslate,
|
|
111
|
-
translate
|
|
112
|
-
};
|
|
113
|
-
}, [
|
|
114
|
-
handleTranslate,
|
|
115
|
-
translate
|
|
116
|
-
]);
|
|
117
|
-
useEffect(() => {
|
|
118
|
-
setTranslate({
|
|
119
|
-
x: xOffset,
|
|
120
|
-
y: yOffset
|
|
121
|
-
});
|
|
122
|
-
}, [
|
|
123
|
-
xOffset,
|
|
124
|
-
yOffset
|
|
125
|
-
]);
|
|
126
|
-
const grid = useMemo(() => {
|
|
127
|
-
var _a;
|
|
128
|
-
return (_a = (givenGrid === false ?
|
|
129
|
-
noGrid :
|
|
130
|
-
givenGrid)) !== null && _a !== void 0 ? _a : defaultSettings.grid;
|
|
131
|
-
}, [
|
|
132
|
-
givenGrid
|
|
133
|
-
]);
|
|
134
|
-
const derivedSnap = useMemo(() => {
|
|
135
|
-
if (snap === undefined) {
|
|
136
|
-
return givenGrid === undefined ?
|
|
137
|
-
noGrid :
|
|
138
|
-
grid;
|
|
139
|
-
}
|
|
140
|
-
if (snap === false) {
|
|
141
|
-
return noGrid;
|
|
142
|
-
}
|
|
143
|
-
if (snap === true) {
|
|
144
|
-
return grid;
|
|
145
|
-
}
|
|
146
|
-
return snap;
|
|
147
|
-
}, [
|
|
148
|
-
givenGrid,
|
|
149
|
-
grid,
|
|
150
|
-
snap
|
|
151
|
-
]);
|
|
152
|
-
const hiddenGrid = givenGrid === false ?
|
|
153
|
-
null :
|
|
154
|
-
(_jsx(Grid, {}));
|
|
155
|
-
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] }) }) }) }) }) }));
|
|
156
|
-
const gridContext = givenGrid === false ?
|
|
157
|
-
staticContexts :
|
|
158
|
-
(_jsx(GridContext.Provider, { value: givenGrid !== null && givenGrid !== void 0 ? givenGrid : defaultSettings.grid, children: staticContexts }));
|
|
159
|
-
return (_jsx(WrappedGraphContexts, { edgeFrequency: edgeFrequency, grid: false, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, children: gridContext }));
|
|
160
|
-
};
|
|
161
|
-
GraphContexts.displayName = 'LincleInteractiveGraphContexts';
|
|
162
|
-
export default GraphContexts;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Grid as GridBase } from '../../base';
|
|
3
|
-
import { ScaleContext, TranslateContext } from '../../shared';
|
|
4
|
-
import { useContext } from 'react';
|
|
5
|
-
const Grid = ({ children }) => {
|
|
6
|
-
const { scale } = useContext(ScaleContext);
|
|
7
|
-
const { translate } = useContext(TranslateContext);
|
|
8
|
-
return (_jsx(GridBase, { scale: scale, xOffset: translate.x, yOffset: translate.y, children: children }));
|
|
9
|
-
};
|
|
10
|
-
Grid.displayName = 'LincleInteractiveGrid';
|
|
11
|
-
export default Grid;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Path as default } from '../../base';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Path as default } from '../../base';
|