@lincle/react-web-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/README.md +110 -110
- package/dist/components/Graph/Grid/index.js +3 -3
- package/dist/components/Interaction/Controls/index.js +41 -12
- package/dist/components/Interaction/index.d.ts +1 -1
- package/dist/components/Node/PullNode/index.js +1 -1
- package/dist/components/Node/index.js +1 -1
- package/dist/components/Nodes/Interaction/index.d.ts +1 -1
- package/dist/shared.d.ts +22 -22
- package/dist/styles.g.css +29 -29
- package/package.json +99 -99
package/README.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
|
|
2
|
+
<h1><code>@lincle/react-web-interactive</code>: An interactive <i>reactive</i> React node and edge generator</h1>
|
|
3
3
|
</div>
|
|
4
4
|
|
|
5
5
|
<div align="center">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
<a href="https://www.npmjs.org/package/@lincle/react-web-interactive"><img alt="NPM Version" src="https://img.shields.io/npm/v/@lincle/react-web-interactive.svg" /></a>
|
|
7
|
+
<a href="https://www.gnu.org/licenses/gpl-3.0.en.html"><img alt="License" src="https://img.shields.io/npm/l/@lincle/react-web-interactive.svg" /></a>
|
|
8
|
+
<a href="https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgitlab.com%2Flincle%2Flincle?ref=badge_shield"><img alt="FOSSA Status" src="https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgitlab.com%2Flincle%2Flincle.svg?type=shield" /></a>
|
|
9
9
|
</div>
|
|
10
10
|
|
|
11
11
|
<div align="center">
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
<a href="https://github.com/gajus/canonical"><img alt="Canonical Code Style" src="https://img.shields.io/badge/code%20style-canonical-blue.svg" /></a>
|
|
13
|
+
<a href="https://commitizen.github.io/cz-cli/"><img alt="Commitizen Friendly" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" /></a>
|
|
14
|
+
<a href="https://github.com/semantic-release/semantic-release#readme"><img alt="Semantic Release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" /></a>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
17
17
|
<div align="center">
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
<a href="https://gitlab.com/digested/lincle/commits/master"><img alt="Build Status" src="https://gitlab.com/digested/lincle/badges/master/pipeline.svg" /></a>
|
|
19
|
+
<a href="https://lincle.gitlab.io/lincle/stats/base/coverage/lcov-report/"><img alt="Coverage Report" src="https://gitlab.com/digested/lincle/badges/master/coverage.svg" /></a>
|
|
20
|
+
<a href="https://lincle.gitlab.io/lincle/stats/base/webpack/"><img alt="Build Analysis" src="https://img.shields.io/badge/webpack-stats-blue.svg" /></a>
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
23
|
**`@lincle/react-web-interactive`** generates a reactive, composable graph/diagram. `@lincle/react-web-interactive` is built on [`@lincle/base`](https://www.npmjs.com/package/@lincle/base) diagram generating capabilities adding interactive functionality.
|
|
@@ -51,107 +51,107 @@ import '@lincle/react-web-interactive/dist/main.min.css';
|
|
|
51
51
|
The following example will generate this diagram:
|
|
52
52
|
|
|
53
53
|
<div align="center">
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
<a href="https://gitlab.com/digested/lincle/-/raw/master/static/react-yad-example.png">
|
|
55
|
+
<img src="https://gitlab.com/digested/lincle/-/raw/master/static/react-yad-example.png" alt="resulting screenshot of simple example" style="max-width:100%;">
|
|
56
|
+
</a>
|
|
57
57
|
</div>
|
|
58
58
|
|
|
59
59
|
> [<h3>CodeSandbox</h3>](https://codesandbox.io/s/react-yad-simple-example-cus8v)
|
|
60
60
|
|
|
61
61
|
```css
|
|
62
62
|
.node {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
width: calc(100% - 2px);
|
|
67
|
+
height: calc(100% - 2px);
|
|
68
|
+
cursor: grab;
|
|
69
|
+
border: 1px solid black;
|
|
70
|
+
background-color: white;
|
|
71
|
+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
.node:active {
|
|
75
|
-
|
|
75
|
+
cursor: grabbing;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
.node-oval {
|
|
79
|
-
|
|
79
|
+
border-radius: 50%;
|
|
80
80
|
}
|
|
81
81
|
```
|
|
82
82
|
|
|
83
83
|
```ts
|
|
84
84
|
<Graph
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
85
|
+
id='YetAnotherDiagram'
|
|
86
|
+
key='1'
|
|
87
|
+
nodeHeight={50}
|
|
88
|
+
nodeWidth={50}
|
|
89
|
+
onEdgeDrop={handleEdgeDrop}
|
|
90
90
|
>
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
91
|
+
<Nodes>
|
|
92
|
+
<Node
|
|
93
|
+
id={1}
|
|
94
|
+
key={1}
|
|
95
|
+
x={50}
|
|
96
|
+
y={50}
|
|
97
|
+
>
|
|
98
|
+
<div styleName='node'>
|
|
99
|
+
Node 1
|
|
100
|
+
</div>
|
|
101
|
+
</Node>
|
|
102
|
+
<Node
|
|
103
|
+
height={100}
|
|
104
|
+
id={2}
|
|
105
|
+
key={2}
|
|
106
|
+
line='direct'
|
|
107
|
+
shape='oval'
|
|
108
|
+
width={200}
|
|
109
|
+
x={100}
|
|
110
|
+
y={150}
|
|
111
|
+
>
|
|
112
|
+
<div styleName='node node-oval'>
|
|
113
|
+
Node 2
|
|
114
|
+
</div>
|
|
115
|
+
</Node>
|
|
116
|
+
<Node
|
|
117
|
+
id={3}
|
|
118
|
+
key={3}
|
|
119
|
+
line='curve'
|
|
120
|
+
shape='oval'
|
|
121
|
+
x={150}
|
|
122
|
+
y={350}
|
|
123
|
+
>
|
|
124
|
+
<div styleName='node node-oval'>
|
|
125
|
+
Node 3
|
|
126
|
+
</div>
|
|
127
|
+
</Node>
|
|
128
|
+
</Nodes>
|
|
129
|
+
<Edges>
|
|
130
|
+
<Edge
|
|
131
|
+
id={1}
|
|
132
|
+
key={1}
|
|
133
|
+
sourceId={1}
|
|
134
|
+
targetId={2}
|
|
135
|
+
>
|
|
136
|
+
<circle
|
|
137
|
+
fill='white'
|
|
138
|
+
r='3'
|
|
139
|
+
stroke='black'
|
|
140
|
+
strokeWidth={2}
|
|
141
|
+
>
|
|
142
|
+
<title>
|
|
143
|
+
Bridge
|
|
144
|
+
</title>
|
|
145
|
+
</circle>
|
|
146
|
+
</Edge>
|
|
147
|
+
<Edge
|
|
148
|
+
id={2}
|
|
149
|
+
key={2}
|
|
150
|
+
line='direct'
|
|
151
|
+
sourceId={2}
|
|
152
|
+
targetId={3}
|
|
153
|
+
/>
|
|
154
|
+
</Edges>
|
|
155
155
|
</Graph>
|
|
156
156
|
```
|
|
157
157
|
|
|
@@ -256,23 +256,23 @@ Instead of using the `@lincle/react-web-interactive` provided edges (`curve`, `l
|
|
|
256
256
|
|
|
257
257
|
```ts
|
|
258
258
|
(
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
259
|
+
source: {
|
|
260
|
+
height: number,
|
|
261
|
+
id: string | number,
|
|
262
|
+
shape: 'oval' | 'rectangle',
|
|
263
|
+
width: number,
|
|
264
|
+
x: number,
|
|
265
|
+
y: number
|
|
266
|
+
},
|
|
267
|
+
target: {
|
|
268
|
+
height: number,
|
|
269
|
+
id: string | number,
|
|
270
|
+
shape: 'oval' | 'rectangle',
|
|
271
|
+
width: number,
|
|
272
|
+
x: number,
|
|
273
|
+
y: number
|
|
274
|
+
},
|
|
275
|
+
children?: ReactNode
|
|
276
276
|
) => Component<SVG type>
|
|
277
277
|
```
|
|
278
278
|
|
|
@@ -32,15 +32,15 @@ const Grid = ({ children }) => {
|
|
|
32
32
|
const child = (0, react_1.useMemo)(() => {
|
|
33
33
|
if (!children) {
|
|
34
34
|
switch (mode) {
|
|
35
|
+
case 'move': {
|
|
36
|
+
return circle;
|
|
37
|
+
}
|
|
35
38
|
case 'pull': {
|
|
36
39
|
return line;
|
|
37
40
|
}
|
|
38
41
|
case 'select': {
|
|
39
42
|
return plus;
|
|
40
43
|
}
|
|
41
|
-
case 'move': {
|
|
42
|
-
return circle;
|
|
43
|
-
}
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
return children;
|
|
@@ -18,7 +18,7 @@ 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(() => {
|
|
@@ -29,39 +29,50 @@ const useDoubleTap = () => {
|
|
|
29
29
|
}, []);
|
|
30
30
|
};
|
|
31
31
|
const Controls = ({ onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
|
|
32
|
-
|
|
32
|
+
var _a;
|
|
33
|
+
const graphMode = (_a = (0, shared_1.useMode)()) !== null && _a !== void 0 ? _a : 'move';
|
|
33
34
|
const onMode = (0, shared_1.useOnMode)();
|
|
35
|
+
const pointerPosition = (0, react_1.useRef)({
|
|
36
|
+
mouse: {
|
|
37
|
+
x: 0,
|
|
38
|
+
y: 0
|
|
39
|
+
}
|
|
40
|
+
});
|
|
34
41
|
const handleDoubleTap = useDoubleTap();
|
|
35
42
|
const handleTapEnd = (0, react_1.useCallback)(() => {
|
|
36
43
|
if (onMode) {
|
|
37
44
|
switch (graphMode) {
|
|
38
45
|
case 'move': {
|
|
39
|
-
|
|
46
|
+
handleDoubleTap(() => {
|
|
40
47
|
onMode('pull');
|
|
41
48
|
});
|
|
49
|
+
return;
|
|
42
50
|
}
|
|
43
51
|
case 'pull': {
|
|
44
|
-
|
|
52
|
+
handleDoubleTap(() => {
|
|
45
53
|
onMode('select');
|
|
46
54
|
});
|
|
55
|
+
return;
|
|
47
56
|
}
|
|
48
|
-
case 'select':
|
|
49
|
-
|
|
50
|
-
return handleDoubleTap(() => {
|
|
57
|
+
case 'select': {
|
|
58
|
+
handleDoubleTap(() => {
|
|
51
59
|
onMode('move');
|
|
52
60
|
});
|
|
53
61
|
}
|
|
54
62
|
}
|
|
55
63
|
}
|
|
56
|
-
else {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
64
|
}, [
|
|
60
65
|
graphMode,
|
|
61
66
|
handleDoubleTap,
|
|
62
67
|
onMode
|
|
63
68
|
]);
|
|
64
69
|
const handleMouseDown = (0, react_1.useCallback)((event) => {
|
|
70
|
+
pointerPosition.current = {
|
|
71
|
+
mouse: {
|
|
72
|
+
x: event.clientX,
|
|
73
|
+
y: event.clientY
|
|
74
|
+
}
|
|
75
|
+
};
|
|
65
76
|
if (onMouseDown) {
|
|
66
77
|
onMouseDown(event);
|
|
67
78
|
}
|
|
@@ -69,7 +80,10 @@ const Controls = ({ onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
|
|
|
69
80
|
onMouseDown
|
|
70
81
|
]);
|
|
71
82
|
const handleMouseUp = (0, react_1.useCallback)((event) => {
|
|
72
|
-
|
|
83
|
+
if (pointerPosition.current.mouse.x === Math.round(event.clientX) &&
|
|
84
|
+
pointerPosition.current.mouse.y === Math.round(event.clientY)) {
|
|
85
|
+
handleTapEnd();
|
|
86
|
+
}
|
|
73
87
|
if (onMouseUp) {
|
|
74
88
|
onMouseUp(event);
|
|
75
89
|
}
|
|
@@ -78,6 +92,12 @@ const Controls = ({ onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
|
|
|
78
92
|
onMouseUp
|
|
79
93
|
]);
|
|
80
94
|
const handleTouchStart = (0, react_1.useCallback)((event) => {
|
|
95
|
+
for (const [index, touch] of Object.entries(event.changedTouches)) {
|
|
96
|
+
pointerPosition.current[touch.identifier] = {
|
|
97
|
+
x: touch.clientX,
|
|
98
|
+
y: touch.clientY
|
|
99
|
+
};
|
|
100
|
+
}
|
|
81
101
|
if (onTouchStart) {
|
|
82
102
|
onTouchStart(event);
|
|
83
103
|
}
|
|
@@ -85,7 +105,16 @@ const Controls = ({ onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
|
|
|
85
105
|
onTouchStart
|
|
86
106
|
]);
|
|
87
107
|
const handleTouchEnd = (0, react_1.useCallback)((event) => {
|
|
88
|
-
|
|
108
|
+
let shouldHandleTapEnd = false;
|
|
109
|
+
for (const [index, touch] of Object.entries(event.changedTouches)) {
|
|
110
|
+
if (pointerPosition.current[touch.identifier].x === touch.clientX &&
|
|
111
|
+
pointerPosition.current[touch.identifier].y === touch.clientY) {
|
|
112
|
+
shouldHandleTapEnd = true;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
if (shouldHandleTapEnd) {
|
|
116
|
+
handleTapEnd();
|
|
117
|
+
}
|
|
89
118
|
if (onTouchEnd) {
|
|
90
119
|
onTouchEnd(event);
|
|
91
120
|
}
|
|
@@ -101,7 +101,7 @@ const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, on
|
|
|
101
101
|
]);
|
|
102
102
|
const nodeRef = (0, react_1.useRef)(null);
|
|
103
103
|
return diagramId ?
|
|
104
|
-
(
|
|
104
|
+
(0, jsx_runtime_1.jsx)(react_draggable_1.DraggableCore, { disabled: disabled, nodeRef: nodeRef, onDrag: handleDrag, onStart: handleStart, onStop: handleStop, scale: scale, children: (0, jsx_runtime_1.jsx)("div", { className: className, ref: nodeRef, style: viewStyle }) }) :
|
|
105
105
|
null;
|
|
106
106
|
};
|
|
107
107
|
PullNode.displayName = 'LincleInteractivePullNode';
|
|
@@ -115,7 +115,7 @@ const Node = ({ children, height: givenHeight, id, line: givenLine, mode: givenM
|
|
|
115
115
|
]);
|
|
116
116
|
const pullNode = (0, react_1.useMemo)(() => {
|
|
117
117
|
return mode === 'pull' && pull ?
|
|
118
|
-
(
|
|
118
|
+
(0, jsx_runtime_1.jsx)(PullNode_1.default, { height: height, line: line, mode: mode, onEdgeDrop: onEdgeDrop, shape: shape, sourceId: id, style: style, width: width, x: pullPosition.current.x, y: pullPosition.current.y }) :
|
|
119
119
|
null;
|
|
120
120
|
}, [
|
|
121
121
|
mode
|
package/dist/shared.d.ts
CHANGED
|
@@ -1,7 +1,24 @@
|
|
|
1
|
-
import { type DraggableData, type EdgeProps, type GraphProps as InteractiveGraphProps, type MoveNodeProps as SharedMoveNodeProps, type NodeProps as SharedNodeProps, type
|
|
1
|
+
import { type DraggableData, type EdgeProps, 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 NodeProps as BaseNodeProps } from '@lincle/react-web-base';
|
|
3
3
|
import { type CSSProperties, type MouseEvent, type PropsWithChildren, type TouchEvent } from 'react';
|
|
4
4
|
export type DraggableEvent = MouseEvent | MouseEvent<HTMLElement | SVGElement> | TouchEvent | TouchEvent<HTMLElement | SVGElement>;
|
|
5
|
+
export type GraphNodeControlProps = {
|
|
6
|
+
onNodeDrag?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
|
|
7
|
+
onNodeSelect?: (nodeId: number | string) => void;
|
|
8
|
+
onNodeStart?: (event: DraggableEvent, nodeId: number | string) => void;
|
|
9
|
+
onNodeStop?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
|
|
10
|
+
};
|
|
11
|
+
export type GraphProps = GraphNodeControlProps & InteractionProps & Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'>;
|
|
12
|
+
export type InteractionControlProps = {
|
|
13
|
+
onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
14
|
+
onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
15
|
+
onTouchEnd?: (event: TouchEvent<HTMLDivElement>) => void;
|
|
16
|
+
onTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;
|
|
17
|
+
};
|
|
18
|
+
export type InteractionProps = PropsWithChildren<InteractionControlProps & {}>;
|
|
19
|
+
export type MoveNodeProps = BaseNodeProps & Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & {
|
|
20
|
+
readonly onDrag?: (event: DraggableEvent, data: DraggableData, position: Position) => void;
|
|
21
|
+
};
|
|
5
22
|
export type NodeControlProps = {
|
|
6
23
|
onDrag?: (event: DraggableEvent, data: DraggableData) => void;
|
|
7
24
|
onEdgeDrop?: (event: DraggableEvent, sourceId: number | string, targetId?: number | string) => void;
|
|
@@ -9,36 +26,19 @@ export type NodeControlProps = {
|
|
|
9
26
|
onStart?: (event: DraggableEvent) => void;
|
|
10
27
|
onStop?: (event: DraggableEvent, data: DraggableData) => void;
|
|
11
28
|
};
|
|
12
|
-
export type
|
|
13
|
-
|
|
14
|
-
onNodeSelect?: (nodeId: number | string) => void;
|
|
15
|
-
onNodeStart?: (event: DraggableEvent, nodeId: number | string) => void;
|
|
16
|
-
onNodeStop?: (event: DraggableEvent, nodeId: number | string, data: DraggableData) => void;
|
|
17
|
-
};
|
|
18
|
-
export type PullProps = Omit<EdgeProps, 'children' | 'id' | 'path' | 'targetId'> & Omit<NodeProps, 'children' | 'id'> & SharedPullProps & {
|
|
29
|
+
export type NodeProps = BaseNodeProps & NodeControlProps & SharedNodeProps;
|
|
30
|
+
export type PullNodeProps = Omit<NodeProps, 'id'> & SharedPullNodeProps & {
|
|
19
31
|
className?: string;
|
|
20
32
|
style?: {
|
|
33
|
+
node?: CSSProperties;
|
|
21
34
|
pull?: CSSProperties;
|
|
22
35
|
};
|
|
23
36
|
};
|
|
24
|
-
export type
|
|
37
|
+
export type PullProps = Omit<EdgeProps, 'children' | 'id' | 'path' | 'targetId'> & Omit<NodeProps, 'children' | 'id'> & SharedPullProps & {
|
|
25
38
|
className?: string;
|
|
26
39
|
style?: {
|
|
27
|
-
node?: CSSProperties;
|
|
28
40
|
pull?: CSSProperties;
|
|
29
41
|
};
|
|
30
42
|
};
|
|
31
|
-
export type NodeProps = SharedNodeProps & BaseNodeProps & NodeControlProps;
|
|
32
|
-
export type InteractionControlProps = {
|
|
33
|
-
onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
34
|
-
onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
35
|
-
onTouchEnd?: (event: TouchEvent<HTMLDivElement>) => void;
|
|
36
|
-
onTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;
|
|
37
|
-
};
|
|
38
|
-
export type InteractionProps = PropsWithChildren<{} & InteractionControlProps>;
|
|
39
|
-
export type MoveNodeProps = Omit<NodeProps, 'onDrag' | 'onSelect'> & SharedMoveNodeProps & BaseNodeProps & {
|
|
40
|
-
readonly onDrag?: (event: DraggableEvent, data: DraggableData, position: Position) => void;
|
|
41
|
-
};
|
|
42
|
-
export type GraphProps = Omit<InteractiveGraphProps, 'onNodeDrag' | 'onNodeSelect' | 'onNodeStart' | 'onNodeStop'> & InteractionProps & GraphNodeControlProps;
|
|
43
43
|
export { type ConnectionsProps, type DraggableData, type EdgeNodeProps, type EdgesProps, type GridProps, type ModeType, type NodesProps, type Position, Providers, useConnections, useDefaultLine, useDefaultNodeHeight, useDefaultNodeWidth, useDefaultShape, useDiagramId, useMaxScale, useMinScale, useMode, useModeGiven, useMove, useNodePositions, useOnMode, useOnNodeDrag, useOnNodeEdgeDrop, useOnNodeSelect, useOnNodeStart, useOnNodeStop, useOnScale, useOnTranslate, usePan, usePull, useScale, useSetConnection, useSnap, useTranslate, useZoom } from '@lincle/react-interactive-shared';
|
|
44
44
|
export { Graph as GraphBase } from '@lincle/react-web-base';
|
package/dist/styles.g.css
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
1
|
/* Interaction */
|
|
2
2
|
|
|
3
3
|
.lincle-interactive-graph {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
cursor: cell;
|
|
8
|
+
touch-action: none;
|
|
9
|
+
user-select: none;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.lincle-interactive-graph:active {
|
|
13
|
-
|
|
13
|
+
cursor: all-scroll;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.lincle-interactive-container {
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
position: absolute;
|
|
18
|
+
inset: 0;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.lincle-interactive-container > div {
|
|
22
|
-
|
|
22
|
+
position: initial !important;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.lincle-interactive-transform {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
transform-origin: 0 0;
|
|
27
|
+
will-change: transform;
|
|
28
|
+
backface-visibility: hidden;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
/* Pull */
|
|
32
32
|
|
|
33
33
|
.lincle-interactive-drag {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
position: absolute;
|
|
35
|
+
z-index: 1;
|
|
36
|
+
transform-origin: 0 0;
|
|
37
|
+
cursor: grab;
|
|
38
|
+
will-change: transform;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.lincle-interactive-moved {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
width: 200px;
|
|
43
|
+
height: 200px;
|
|
44
|
+
margin: -100px 0 0 -100px;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.lincle-interactive-drag:active {
|
|
48
|
-
|
|
48
|
+
cursor: grabbing;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.lincle-interactive-drag + svg {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
position: absolute;
|
|
53
|
+
overflow: visible;
|
|
54
|
+
pointer-events: none;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
.lincle-interactive-hidden {
|
|
58
|
-
|
|
58
|
+
opacity: 0;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
@keyframes lincle-interactive-dash {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
to {
|
|
63
|
+
stroke-dashoffset: 1000;
|
|
64
|
+
}
|
|
65
65
|
}
|
package/package.json
CHANGED
|
@@ -1,101 +1,101 @@
|
|
|
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
|
-
|
|
2
|
+
"name": "@lincle/react-web-interactive",
|
|
3
|
+
"title": "lincle react web 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/tree/master/packages/react-web-interactive/",
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "https://gitlab.com/.git"
|
|
27
|
+
},
|
|
28
|
+
"bugs": {
|
|
29
|
+
"url": "https://gitlab.com/issues"
|
|
30
|
+
},
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "run-s clean:dist build:prod build:styles",
|
|
33
|
+
"build:prod": "tsc -p ./tsconfig.json",
|
|
34
|
+
"build:watch": "run-s clean:dist build:prod build:styles build:watch:tsc",
|
|
35
|
+
"build:watch:tsc": "tsc -p ./tsconfig.json --watch --pretty --preserveWatchOutput",
|
|
36
|
+
"build:styles": "ncp src/styles.g.css dist/styles.g.css",
|
|
37
|
+
"----------------------------------------------------------------": "",
|
|
38
|
+
"build:prod:config": "",
|
|
39
|
+
"---------------------------------------------------------------": "",
|
|
40
|
+
"lint": "run-p lint:es",
|
|
41
|
+
"lint:es": "eslint",
|
|
42
|
+
"clean": "run-s clean:dist clean:node_modules",
|
|
43
|
+
"clean:node_modules": "rimraf node_modules yarn.lock package-lock.json",
|
|
44
|
+
"clean:dist": "rimraf dist"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@digest/eslint-config-jest": "^4.13.0",
|
|
48
|
+
"@digest/eslint-config-react": "^4.13.0",
|
|
49
|
+
"@digest/eslint-config-typescript": "^4.13.0",
|
|
50
|
+
"@digest/jest-junit": "^4.13.0",
|
|
51
|
+
"@digest/jest-react": "^4.13.0",
|
|
52
|
+
"@digest/jest-typescript": "^4.13.0",
|
|
53
|
+
"@digest/stylelint-config": "^4.13.0",
|
|
54
|
+
"@digest/typescript": "^4.13.0",
|
|
55
|
+
"@types/jest": "^29.5.14",
|
|
56
|
+
"@types/node": "^22.10.1",
|
|
57
|
+
"@types/react": "^18.3.12",
|
|
58
|
+
"@types/react-dom": "^18.3.1",
|
|
59
|
+
"@types/react-test-renderer": "^18.3.0",
|
|
60
|
+
"cross-env": "^7.0.3",
|
|
61
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
62
|
+
"jest-environment-jsdom-global": "^4.0.0",
|
|
63
|
+
"ncp": "^2.0.0",
|
|
64
|
+
"npm-run-all": "^4.1.5",
|
|
65
|
+
"react": "^18.3.1",
|
|
66
|
+
"react-dom": "^18.3.1",
|
|
67
|
+
"react-test-renderer": "^18.3.1",
|
|
68
|
+
"rimraf": "^6.0.1"
|
|
69
|
+
},
|
|
70
|
+
"dependencies": {
|
|
71
|
+
"@lincle/react-interactive-shared": "^0.4.0-next.13",
|
|
72
|
+
"@lincle/react-shared": "^0.4.0-next.13",
|
|
73
|
+
"@lincle/react-web-base": "^0.4.0-next.13",
|
|
74
|
+
"react-draggable": "^4.4.6",
|
|
75
|
+
"react-map-interaction": "^2.1.0"
|
|
76
|
+
},
|
|
77
|
+
"peerDependencies": {
|
|
78
|
+
"react": "^18.0.0",
|
|
79
|
+
"react-dom": "^18.0.0"
|
|
80
|
+
},
|
|
81
|
+
"keywords": [
|
|
82
|
+
"library",
|
|
83
|
+
"lincle",
|
|
84
|
+
"typescript",
|
|
85
|
+
"react",
|
|
86
|
+
"reactjs",
|
|
87
|
+
"react-dom",
|
|
88
|
+
"react-web",
|
|
89
|
+
"reactive",
|
|
90
|
+
"react-draggable",
|
|
91
|
+
"interactive",
|
|
92
|
+
"graph",
|
|
93
|
+
"diagram",
|
|
94
|
+
"dag",
|
|
95
|
+
"acyclical graph",
|
|
96
|
+
"cyclical graph",
|
|
97
|
+
"dragndrop",
|
|
98
|
+
"drag"
|
|
99
|
+
],
|
|
100
|
+
"gitHead": "84d45ca98dd0d6589c697cc7457a897fa777340f"
|
|
101
101
|
}
|