@lincle/react-web-interactive 0.4.0-next.6 → 0.4.0-next.7

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.
@@ -0,0 +1,4 @@
1
+ import { type InteractionControlProps } from '../../shared';
2
+ import { type FunctionComponent } from 'react';
3
+ declare const Controls: FunctionComponent<InteractionControlProps>;
4
+ export default Controls;
@@ -0,0 +1,99 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const shared_1 = require("../../shared");
5
+ const react_1 = require("react");
6
+ const CLICK_TIME = 500;
7
+ const useDoubleTap = () => {
8
+ const timer = (0, react_1.useRef)(null);
9
+ (0, react_1.useEffect)(() => {
10
+ return () => {
11
+ if (timer.current) {
12
+ clearTimeout(timer.current);
13
+ timer.current = null;
14
+ }
15
+ };
16
+ }, []);
17
+ return (0, react_1.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 Controls = ({ onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
32
+ const graphMode = (0, shared_1.useMode)();
33
+ const onMode = (0, shared_1.useOnMode)();
34
+ const handleDoubleTap = useDoubleTap();
35
+ const handleTapEnd = (0, react_1.useCallback)(() => {
36
+ if (onMode) {
37
+ switch (graphMode) {
38
+ case 'move': {
39
+ return handleDoubleTap(() => {
40
+ onMode('pull');
41
+ });
42
+ }
43
+ case 'pull': {
44
+ return handleDoubleTap(() => {
45
+ onMode('select');
46
+ });
47
+ }
48
+ case 'select':
49
+ default: {
50
+ return handleDoubleTap(() => {
51
+ onMode('move');
52
+ });
53
+ }
54
+ }
55
+ }
56
+ else {
57
+ return;
58
+ }
59
+ }, [
60
+ graphMode,
61
+ handleDoubleTap,
62
+ onMode
63
+ ]);
64
+ const handleMouseDown = (0, react_1.useCallback)((event) => {
65
+ if (onMouseDown) {
66
+ onMouseDown(event);
67
+ }
68
+ }, [
69
+ onMouseDown
70
+ ]);
71
+ const handleMouseUp = (0, react_1.useCallback)((event) => {
72
+ handleTapEnd();
73
+ if (onMouseUp) {
74
+ onMouseUp(event);
75
+ }
76
+ }, [
77
+ handleTapEnd,
78
+ onMouseUp
79
+ ]);
80
+ const handleTouchStart = (0, react_1.useCallback)((event) => {
81
+ if (onTouchStart) {
82
+ onTouchStart(event);
83
+ }
84
+ }, [
85
+ onTouchStart
86
+ ]);
87
+ const handleTouchEnd = (0, react_1.useCallback)((event) => {
88
+ handleTapEnd();
89
+ if (onTouchEnd) {
90
+ onTouchEnd(event);
91
+ }
92
+ }, [
93
+ handleTapEnd,
94
+ onTouchEnd
95
+ ]);
96
+ return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-container', onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchEnd: handleTouchEnd, onTouchStart: handleTouchStart, role: 'none' }));
97
+ };
98
+ Controls.displayName = 'LincleInteractiveControls';
99
+ exports.default = Controls;
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Grid = exports.Graph = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const shared_1 = require("../../shared");
9
+ const Interaction_1 = __importDefault(require("../Interaction"));
9
10
  const Grid_1 = __importDefault(require("./Grid"));
10
11
  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 }) => {
11
12
  if (!id) {
@@ -15,7 +16,7 @@ const Graph = ({ children, edgeFrequency, grid, id, line, maxScale, minScale, mo
15
16
  const gird = showGrid === false ?
16
17
  null :
17
18
  (0, jsx_runtime_1.jsx)(Grid_1.default, {});
18
- return ((0, jsx_runtime_1.jsx)(shared_1.GraphBase, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, showGrid: false, children: (0, jsx_runtime_1.jsxs)(shared_1.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] }) }));
19
+ return ((0, jsx_runtime_1.jsx)(shared_1.GraphBase, { edgeFrequency: edgeFrequency, grid: grid, id: id, line: line, nodeFrequency: nodeFrequency, nodeHeight: nodeHeight, nodeWidth: nodeWidth, shape: shape, showGrid: false, children: (0, jsx_runtime_1.jsxs)(shared_1.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, (0, jsx_runtime_1.jsx)(Interaction_1.default, {}), children] }) }));
19
20
  };
20
21
  exports.Graph = Graph;
21
22
  Graph.displayName = 'LincleInteractiveGraph';
@@ -0,0 +1,3 @@
1
+ import { type FunctionComponent } from 'react';
2
+ declare const Interaction: FunctionComponent<{}>;
3
+ export default Interaction;
@@ -0,0 +1,99 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const jsx_runtime_1 = require("react/jsx-runtime");
7
+ const shared_1 = require("../../shared");
8
+ const Controls_1 = __importDefault(require("../Controls"));
9
+ const react_1 = require("react");
10
+ const react_map_interaction_1 = require("react-map-interaction");
11
+ const controls = () => {
12
+ return (0, jsx_runtime_1.jsx)(Controls_1.default, {});
13
+ };
14
+ const Interaction = () => {
15
+ const scale = (0, shared_1.useScale)();
16
+ const onScale = (0, shared_1.useOnScale)();
17
+ const translate = (0, shared_1.useTranslate)();
18
+ const onTranslate = (0, shared_1.useOnTranslate)();
19
+ const givenMode = (0, shared_1.useModeGiven)();
20
+ const onMode = (0, shared_1.useOnMode)();
21
+ const maxScale = (0, shared_1.useMaxScale)();
22
+ const minScale = (0, shared_1.useMinScale)();
23
+ const pan = (0, shared_1.usePan)();
24
+ const zoom = (0, shared_1.useZoom)();
25
+ const keypress = (0, react_1.useRef)(false);
26
+ const handleMode = (0, react_1.useCallback)((changedMode) => {
27
+ if (onMode) {
28
+ onMode(changedMode);
29
+ }
30
+ }, [
31
+ onMode
32
+ ]);
33
+ (0, react_1.useEffect)(() => {
34
+ if (givenMode) {
35
+ return () => {
36
+ };
37
+ }
38
+ const onKeyDown = (event) => {
39
+ keypress.current = true;
40
+ if (event.shiftKey) {
41
+ handleMode('pull');
42
+ }
43
+ else if (event.ctrlKey) {
44
+ handleMode('select');
45
+ }
46
+ };
47
+ const onKeyUp = (event) => {
48
+ keypress.current = false;
49
+ if (!event.shiftKey) {
50
+ handleMode('move');
51
+ }
52
+ else if (!event.ctrlKey) {
53
+ handleMode('move');
54
+ }
55
+ };
56
+ window.addEventListener('keydown', onKeyDown);
57
+ window.addEventListener('keyup', onKeyUp);
58
+ return () => {
59
+ keypress.current = false;
60
+ window.removeEventListener('keydown', onKeyDown);
61
+ window.removeEventListener('keyup', onKeyUp);
62
+ };
63
+ }, [
64
+ givenMode,
65
+ handleMode
66
+ ]);
67
+ const defaultTranslation = (0, react_1.useMemo)(() => {
68
+ return {
69
+ x: Math.round(translate.x),
70
+ y: Math.round(translate.y)
71
+ };
72
+ }, []);
73
+ const handleChange = (0, react_1.useCallback)(({ scale: z, translation: { x, y } }) => {
74
+ if (onTranslate) {
75
+ onTranslate({
76
+ x,
77
+ y
78
+ });
79
+ }
80
+ if (onScale) {
81
+ onScale(z);
82
+ }
83
+ }, [
84
+ onScale,
85
+ onTranslate
86
+ ]);
87
+ const transform = (0, react_1.useMemo)(() => {
88
+ return {
89
+ scale,
90
+ translation: translate
91
+ };
92
+ }, [
93
+ scale,
94
+ translate
95
+ ]);
96
+ return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-container', children: (0, jsx_runtime_1.jsx)(react_map_interaction_1.MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: !pan, disableZoom: !zoom, maxScale: maxScale, minScale: minScale, onChange: handleChange, value: transform, children: controls }) }));
97
+ };
98
+ Interaction.displayName = 'LincleInteractiveInteraction';
99
+ exports.default = Interaction;
@@ -1,4 +1,3 @@
1
- import { type InteractionProps } from '../../../shared';
2
- import { type FunctionComponent } from 'react';
3
- declare const Interaction: FunctionComponent<InteractionProps>;
1
+ import { type FunctionComponent, type PropsWithChildren } from 'react';
2
+ declare const Interaction: FunctionComponent<PropsWithChildren<{}>>;
4
3
  export default Interaction;
@@ -3,46 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
4
  const shared_1 = require("../../../shared");
5
5
  const react_1 = require("react");
6
- const react_map_interaction_1 = require("react-map-interaction");
7
- const CLICK_TIME = 500;
8
- const useDoubleTap = () => {
9
- const timer = (0, react_1.useRef)(null);
10
- (0, react_1.useEffect)(() => {
11
- return () => {
12
- if (timer.current) {
13
- clearTimeout(timer.current);
14
- timer.current = null;
15
- }
16
- };
17
- }, []);
18
- return (0, react_1.useCallback)((callback, threshold = CLICK_TIME) => {
19
- if (timer.current) {
20
- clearTimeout(timer.current);
21
- timer.current = null;
22
- return callback();
23
- }
24
- else {
25
- timer.current = setTimeout(() => {
26
- timer.current = null;
27
- }, threshold);
28
- return;
29
- }
30
- }, []);
31
- };
32
- const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
6
+ const Interaction = ({ children }) => {
33
7
  const scale = (0, shared_1.useScale)();
34
- const onScale = (0, shared_1.useOnScale)();
35
8
  const translate = (0, shared_1.useTranslate)();
36
- const onTranslate = (0, shared_1.useOnTranslate)();
37
- const graphMode = (0, shared_1.useMode)();
38
9
  const givenMode = (0, shared_1.useModeGiven)();
39
10
  const onMode = (0, shared_1.useOnMode)();
40
- const maxScale = (0, shared_1.useMaxScale)();
41
- const minScale = (0, shared_1.useMinScale)();
42
- const pan = (0, shared_1.usePan)();
43
- const zoom = (0, shared_1.useZoom)();
44
11
  const keypress = (0, react_1.useRef)(false);
45
- const handleDoubleTap = useDoubleTap();
46
12
  const handleMode = (0, react_1.useCallback)((changedMode) => {
47
13
  if (onMode) {
48
14
  onMode(changedMode);
@@ -84,96 +50,6 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
84
50
  givenMode,
85
51
  handleMode
86
52
  ]);
87
- const defaultTranslation = (0, react_1.useMemo)(() => {
88
- return {
89
- x: Math.round(translate.x),
90
- y: Math.round(translate.y)
91
- };
92
- }, []);
93
- const handleChange = (0, react_1.useCallback)(({ scale: z, translation: { x, y } }) => {
94
- if (onTranslate) {
95
- onTranslate({
96
- x,
97
- y
98
- });
99
- }
100
- if (onScale) {
101
- onScale(z);
102
- }
103
- }, [
104
- onScale,
105
- onTranslate
106
- ]);
107
- const handleTapEnd = (0, react_1.useCallback)(() => {
108
- if (onMode) {
109
- switch (graphMode) {
110
- case 'move': {
111
- return handleDoubleTap(() => {
112
- onMode('pull');
113
- });
114
- }
115
- case 'pull': {
116
- return handleDoubleTap(() => {
117
- onMode('select');
118
- });
119
- }
120
- case 'select':
121
- default: {
122
- return handleDoubleTap(() => {
123
- onMode('move');
124
- });
125
- }
126
- }
127
- }
128
- else {
129
- return;
130
- }
131
- }, [
132
- graphMode,
133
- handleDoubleTap,
134
- onMode
135
- ]);
136
- const handleMouseDown = (0, react_1.useCallback)((event) => {
137
- if (onMouseDown) {
138
- onMouseDown(event);
139
- }
140
- }, [
141
- onMouseDown
142
- ]);
143
- const handleMouseUp = (0, react_1.useCallback)((event) => {
144
- handleTapEnd();
145
- if (onMouseUp) {
146
- onMouseUp(event);
147
- }
148
- }, [
149
- handleTapEnd,
150
- onMouseUp
151
- ]);
152
- const handleTouchStart = (0, react_1.useCallback)((event) => {
153
- if (onTouchStart) {
154
- onTouchStart(event);
155
- }
156
- }, [
157
- onTouchStart
158
- ]);
159
- const handleTouchEnd = (0, react_1.useCallback)((event) => {
160
- handleTapEnd();
161
- if (onTouchEnd) {
162
- onTouchEnd(event);
163
- }
164
- }, [
165
- handleTapEnd,
166
- onTouchEnd
167
- ]);
168
- const transform = (0, react_1.useMemo)(() => {
169
- return {
170
- scale,
171
- translation: translate
172
- };
173
- }, [
174
- scale,
175
- translate
176
- ]);
177
53
  const style = (0, react_1.useMemo)(() => {
178
54
  const { x, y } = translate;
179
55
  return {
@@ -183,17 +59,7 @@ const Interaction = ({ children, onMouseDown, onMouseUp, onTouchEnd, onTouchStar
183
59
  scale,
184
60
  translate
185
61
  ]);
186
- const child = (0, react_1.useCallback)(() => {
187
- return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-graph', onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchEnd: handleTouchEnd, onTouchStart: handleTouchStart, role: 'none', children: (0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
188
- }, [
189
- children,
190
- handleMouseDown,
191
- handleMouseUp,
192
- handleTouchEnd,
193
- handleTouchStart,
194
- style
195
- ]);
196
- return ((0, jsx_runtime_1.jsx)(react_map_interaction_1.MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: !pan, disableZoom: !zoom, maxScale: maxScale, minScale: minScale, onChange: handleChange, value: transform, children: child }));
62
+ return ((0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-graph', children: (0, jsx_runtime_1.jsx)("div", { className: 'lincle-interactive-transform', style: style, children: children }) }));
197
63
  };
198
64
  Interaction.displayName = 'LincleInteractiveInteraction';
199
65
  exports.default = Interaction;
package/dist/styles.g.css CHANGED
@@ -1,7 +1,6 @@
1
1
  /* Interaction */
2
2
 
3
3
  .lincle-interactive-graph {
4
- position: relative;
5
4
  width: 100%;
6
5
  height: 100%;
7
6
  overflow: hidden;
@@ -14,6 +13,15 @@
14
13
  cursor: all-scroll;
15
14
  }
16
15
 
16
+ .lincle-interactive-container {
17
+ position: absolute;
18
+ inset: 0;
19
+ }
20
+
21
+ .lincle-interactive-container > div {
22
+ position: initial !important;
23
+ }
24
+
17
25
  .lincle-interactive-transform {
18
26
  transform-origin: 0 0;
19
27
  will-change: transform;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@lincle/react-web-interactive",
3
3
  "title": "lincle react web interactive",
4
4
  "license": "LGPL-3.0-or-later",
5
- "version": "0.4.0-next.6",
5
+ "version": "0.4.0-next.7",
6
6
  "private": false,
7
7
  "description": "A 'reactive' React node and edge generator",
8
8
  "author": "wallzero @wallzeroblog (http://wallzero.com)",
@@ -68,9 +68,9 @@
68
68
  "rimraf": "^6.0.1"
69
69
  },
70
70
  "dependencies": {
71
- "@lincle/react-interactive-shared": "^0.4.0-next.6",
72
- "@lincle/react-shared": "^0.4.0-next.6",
73
- "@lincle/react-web-base": "^0.4.0-next.6",
71
+ "@lincle/react-interactive-shared": "^0.4.0-next.7",
72
+ "@lincle/react-shared": "^0.4.0-next.7",
73
+ "@lincle/react-web-base": "^0.4.0-next.7",
74
74
  "react-draggable": "^4.4.6",
75
75
  "react-map-interaction": "^2.1.0"
76
76
  },
@@ -97,5 +97,5 @@
97
97
  "dragndrop",
98
98
  "drag"
99
99
  ],
100
- "gitHead": "895f6665889abd5b155c7ed9500f016e84855027"
100
+ "gitHead": "4457d7dd7df752f71d0559c5db389177a008252e"
101
101
  }