@lincle/react-native-interactive 0.4.0-next.7 → 0.4.0-next.8

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.
Files changed (7) hide show
  1. package/dist/components/Edges/Connections/index.js +1 -0
  2. package/dist/components/Edges/index.js +1 -0
  3. package/dist/components/Graph/index.js +2 -1
  4. package/dist/components/Interaction/index.d.ts +4 -0
  5. package/dist/components/Interaction/index.js +111 -0
  6. package/dist/components/Nodes/Interaction/index.js +13 -91
  7. package/package.json +5 -5
package/dist/components/Edges/Connections/index.js CHANGED
@@ -7,6 +7,7 @@ import { Defs, Svg } from 'react-native-svg';
7
7
  const { svgStyle } = StyleSheet.create({
8
8
  svgStyle: {
9
9
  overflow: 'visible',
10
+ pointerEvents: 'box-none',
10
11
  position: 'absolute'
11
12
  }
12
13
  });
package/dist/components/Edges/index.js CHANGED
@@ -17,6 +17,7 @@ import { StyleSheet, View } from 'react-native';
17
17
  const { edgesStyle } = StyleSheet.create({
18
18
  edgesStyle: {
19
19
  height: '100%',
20
+ pointerEvents: 'box-none',
20
21
  position: 'absolute',
21
22
  width: '100%'
22
23
  }
package/dist/components/Graph/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { GraphBase, Providers } from '../../shared';
3
+ import Interaction from '../Interaction';
3
4
  import Grid from './Grid';
4
5
  const Graph = ({ children, edgeFrequency, grid, id, line, maxScale, minScale, mode, move, nodeFrequency, nodeHeight, nodeWidth, onNodeDrag, onNodeEdgeDrop, onNodeSelect, onNodeStart, onNodeStop, onScale, onTranslate, pan, pull, scale, shape, showGrid, snap, translate, zoom }) => {
5
6
  if (!id) {
@@ -9,7 +10,7 @@ const Graph = ({ children, edgeFrequency, grid, id, line, maxScale, minScale, mo
9
10
  const gird = showGrid === false ?
10
11
  null :
11
12
  _jsx(Grid, {});
12
- return (_jsx(GraphBase, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, showGrid: false, children: _jsxs(Providers, { maxScale: maxScale, minScale: minScale, mode: mode, move: move, onNodeDrag: onNodeDrag, onNodeEdgeDrop: onNodeEdgeDrop, onNodeSelect: onNodeSelect, onNodeStart: onNodeStart, onNodeStop: onNodeStop, onScale: onScale, onTranslate: onTranslate, pan: pan, pull: pull, scale: scale, snap: snap, translate: translate, zoom: zoom, children: [gird, children] }) }));
13
+ return (_jsx(GraphBase, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, showGrid: false, children: _jsxs(Providers, { maxScale: maxScale, minScale: minScale, mode: mode, move: move, onNodeDrag: onNodeDrag, onNodeEdgeDrop: onNodeEdgeDrop, onNodeSelect: onNodeSelect, onNodeStart: onNodeStart, onNodeStop: onNodeStop, onScale: onScale, onTranslate: onTranslate, pan: pan, pull: pull, scale: scale, snap: snap, translate: translate, zoom: zoom, children: [gird, _jsx(Interaction, {}), children] }) }));
13
14
  };
14
15
  Graph.displayName = 'LincleInteractiveGraph';
15
16
  export { Graph };
package/dist/components/Interaction/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { type InteractionProps } from '../../shared';
2
+ import { type FunctionComponent } from 'react';
3
+ declare const Interaction: FunctionComponent<InteractionProps>;
4
+ export default Interaction;
package/dist/components/Interaction/index.js ADDED
@@ -0,0 +1,111 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useMode, useOnMode, useOnScale, useOnTranslateThrottle, useScale, useTranslate } from '../../shared';
3
+ import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
4
+ import { useCallback, useEffect, useRef } from 'react';
5
+ import { StyleSheet, View } from 'react-native';
6
+ const CLICK_TIME = 500;
7
+ const useDoubleTap = () => {
8
+ const timer = useRef(null);
9
+ useEffect(() => {
10
+ return () => {
11
+ if (timer.current) {
12
+ clearTimeout(timer.current);
13
+ timer.current = null;
14
+ }
15
+ };
16
+ }, []);
17
+ return useCallback((callback, threshold = CLICK_TIME) => {
18
+ if (timer.current) {
19
+ clearTimeout(timer.current);
20
+ timer.current = null;
21
+ return callback();
22
+ }
23
+ else {
24
+ timer.current = setTimeout(() => {
25
+ timer.current = null;
26
+ }, threshold);
27
+ return;
28
+ }
29
+ }, []);
30
+ };
31
+ const styles = StyleSheet.create({
32
+ container: {
33
+ bottom: 0,
34
+ height: '100%',
35
+ left: 0,
36
+ overflow: 'visible',
37
+ position: 'absolute',
38
+ right: 0,
39
+ top: 0,
40
+ width: '100%'
41
+ },
42
+ zoomable: {
43
+ overflow: 'visible'
44
+ }
45
+ });
46
+ const Interaction = ({ onPointerUp }) => {
47
+ const scale = useScale();
48
+ const translate = useTranslate();
49
+ const onScale = useOnScale();
50
+ const onTranslateThrottle = useOnTranslateThrottle();
51
+ const graphMode = useMode();
52
+ const onMode = useOnMode();
53
+ const handleDoubleTap = useDoubleTap();
54
+ const handleOnTransform = useCallback((event) => {
55
+ const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = event;
56
+ onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
57
+ }, [
58
+ onTranslateThrottle
59
+ ]);
60
+ const handleZoom = useCallback((event, gestureState, zoomableViewEventObject) => {
61
+ const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = zoomableViewEventObject;
62
+ onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
63
+ if (onScale) {
64
+ onScale(zoomLevel);
65
+ }
66
+ }, [
67
+ onScale,
68
+ onTranslateThrottle
69
+ ]);
70
+ const handleTapEnd = useCallback(() => {
71
+ if (onMode) {
72
+ switch (graphMode) {
73
+ case 'move': {
74
+ return handleDoubleTap(() => {
75
+ onMode('pull');
76
+ });
77
+ }
78
+ case 'pull': {
79
+ return handleDoubleTap(() => {
80
+ onMode('select');
81
+ });
82
+ }
83
+ case 'select':
84
+ default: {
85
+ return handleDoubleTap(() => {
86
+ onMode('move');
87
+ });
88
+ }
89
+ }
90
+ }
91
+ else {
92
+ return;
93
+ }
94
+ }, [
95
+ graphMode,
96
+ handleDoubleTap,
97
+ onMode
98
+ ]);
99
+ const handlePointerUp = useCallback((event) => {
100
+ handleTapEnd();
101
+ if (onPointerUp) {
102
+ onPointerUp(event);
103
+ }
104
+ }, [
105
+ handleTapEnd,
106
+ onPointerUp
107
+ ]);
108
+ 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 }) }));
109
+ };
110
+ Interaction.displayName = 'LincleInteractiveInteraction';
111
+ export default Interaction;
package/dist/components/Nodes/Interaction/index.js CHANGED
@@ -1,105 +1,27 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useMode, useOnMode, useOnScale, useOnTranslateThrottle, useScale, useTranslate } from '../../../shared';
3
- import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
4
- import { useCallback, useEffect, useRef } from 'react';
2
+ import { useScale, useTranslate } from '../../../shared';
3
+ import { useMemo } from 'react';
5
4
  import { StyleSheet, View } from 'react-native';
6
- const CLICK_TIME = 500;
7
- const useDoubleTap = () => {
8
- const timer = useRef(null);
9
- useEffect(() => {
10
- return () => {
11
- if (timer.current) {
12
- clearTimeout(timer.current);
13
- timer.current = null;
14
- }
15
- };
16
- }, []);
17
- return useCallback((callback, threshold = CLICK_TIME) => {
18
- if (timer.current) {
19
- clearTimeout(timer.current);
20
- timer.current = null;
21
- return callback();
22
- }
23
- else {
24
- timer.current = setTimeout(() => {
25
- timer.current = null;
26
- }, threshold);
27
- return;
28
- }
29
- }, []);
30
- };
31
5
  const styles = StyleSheet.create({
32
6
  container: {
7
+ backfaceVisibility: 'hidden',
33
8
  height: '100%',
34
- overflow: 'visible'
35
- },
36
- zoomable: {
37
- overflow: 'visible'
9
+ overflow: 'visible',
10
+ pointerEvents: 'box-none',
11
+ transformOrigin: '0 0'
38
12
  }
39
13
  });
40
- const Interaction = ({ children, onPointerUp }) => {
14
+ const Interaction = ({ children }) => {
41
15
  const scale = useScale();
42
16
  const translate = useTranslate();
43
- const onScale = useOnScale();
44
- const onTranslateThrottle = useOnTranslateThrottle();
45
- const graphMode = useMode();
46
- const onMode = useOnMode();
47
- const handleDoubleTap = useDoubleTap();
48
- const handleOnTransform = useCallback((event) => {
49
- const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = event;
50
- onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
51
- }, [
52
- onTranslateThrottle
53
- ]);
54
- const handleZoom = useCallback((event, gestureState, zoomableViewEventObject) => {
55
- const { offsetX, offsetY, originalHeight, originalWidth, zoomLevel } = zoomableViewEventObject;
56
- onTranslateThrottle(originalWidth, originalHeight, offsetX, offsetY, zoomLevel);
57
- if (onScale) {
58
- onScale(zoomLevel);
59
- }
60
- }, [
61
- onScale,
62
- onTranslateThrottle
63
- ]);
64
- const handleTapEnd = useCallback(() => {
65
- if (onMode) {
66
- switch (graphMode) {
67
- case 'move': {
68
- return handleDoubleTap(() => {
69
- onMode('pull');
70
- });
71
- }
72
- case 'pull': {
73
- return handleDoubleTap(() => {
74
- onMode('select');
75
- });
76
- }
77
- case 'select':
78
- default: {
79
- return handleDoubleTap(() => {
80
- onMode('move');
81
- });
82
- }
83
- }
84
- }
85
- else {
86
- return;
87
- }
88
- }, [
89
- graphMode,
90
- handleDoubleTap,
91
- onMode
92
- ]);
93
- const handlePointerUp = useCallback((event) => {
94
- handleTapEnd();
95
- if (onPointerUp) {
96
- onPointerUp(event);
97
- }
17
+ const style = useMemo(() => {
18
+ const { x, y } = translate;
19
+ return Object.assign(Object.assign({}, styles.container), { transform: `translateX(${x}px) translateY(${y}px) scale(${scale})` });
98
20
  }, [
99
- handleTapEnd,
100
- onPointerUp
21
+ scale,
22
+ translate
101
23
  ]);
102
- 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 }) }));
24
+ return (_jsx(View, { style: style, children: children }));
103
25
  };
104
26
  Interaction.displayName = 'LincleInteractiveInteraction';
105
27
  export default Interaction;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@lincle/react-native-interactive",
3
3
  "title": "lincle react native interactive",
4
4
  "license": "LGPL-3.0-or-later",
5
- "version": "0.4.0-next.7",
5
+ "version": "0.4.0-next.8",
6
6
  "private": false,
7
7
  "description": "A 'reactive' React node and edge generator",
8
8
  "author": "wallzero @wallzeroblog (http://wallzero.com)",
@@ -70,9 +70,9 @@
70
70
  "rimraf": "^6.0.1"
71
71
  },
72
72
  "dependencies": {
73
- "@lincle/react-interactive-shared": "^0.4.0-next.7",
74
- "@lincle/react-native-base": "^0.4.0-next.7",
75
- "@lincle/react-shared": "^0.4.0-next.7"
73
+ "@lincle/react-interactive-shared": "^0.4.0-next.8",
74
+ "@lincle/react-native-base": "^0.4.0-next.8",
75
+ "@lincle/react-shared": "^0.4.0-next.8"
76
76
  },
77
77
  "peerDependencies": {
78
78
  "@openspacelabs/react-native-zoomable-view": "^2.1.0",
@@ -101,5 +101,5 @@
101
101
  "dragndrop",
102
102
  "drag"
103
103
  ],
104
- "gitHead": "4457d7dd7df752f71d0559c5db389177a008252e"
104
+ "gitHead": "26dd11a8079cc36533e81ad662d9d304ec6c4478"
105
105
  }