@lincle/react-web-interactive 0.4.0-next.17 → 0.4.0-next.19
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.js → cjs/base.js} +1 -0
- package/dist/cjs/base.js.map +1 -0
- package/dist/{components → cjs/components}/Edge/Path/index.js +1 -0
- package/dist/cjs/components/Edge/Path/index.js.map +1 -0
- package/dist/{components → cjs/components}/Edge/index.js +1 -0
- package/dist/cjs/components/Edge/index.js.map +1 -0
- package/dist/{components → cjs/components}/Edges/Connections/index.js +6 -1
- package/dist/cjs/components/Edges/Connections/index.js.map +1 -0
- package/dist/cjs/components/Edges/index.js +18 -0
- package/dist/cjs/components/Edges/index.js.map +1 -0
- package/dist/{components → cjs/components}/Graph/Grid/index.js +1 -0
- package/dist/cjs/components/Graph/Grid/index.js.map +1 -0
- package/dist/{components → cjs/components}/Graph/index.js +1 -0
- package/dist/cjs/components/Graph/index.js.map +1 -0
- package/dist/{components → cjs/components}/Interaction/Controls/index.js +6 -6
- package/dist/cjs/components/Interaction/Controls/index.js.map +1 -0
- package/dist/{components → cjs/components}/Interaction/index.js +1 -0
- package/dist/cjs/components/Interaction/index.js.map +1 -0
- package/dist/{components → cjs/components}/Node/MoveNode/index.js +10 -3
- package/dist/cjs/components/Node/MoveNode/index.js.map +1 -0
- package/dist/{components → cjs/components}/Node/PullNode/index.js +14 -6
- package/dist/cjs/components/Node/PullNode/index.js.map +1 -0
- package/dist/{components → cjs/components}/Node/index.js +13 -13
- package/dist/cjs/components/Node/index.js.map +1 -0
- package/dist/{components → cjs/components}/Nodes/Interaction/index.js +1 -0
- package/dist/cjs/components/Nodes/Interaction/index.js.map +1 -0
- package/dist/cjs/components/Nodes/index.js +15 -0
- package/dist/cjs/components/Nodes/index.js.map +1 -0
- package/dist/{components → cjs/components}/index.js +1 -0
- package/dist/cjs/components/index.js.map +1 -0
- package/dist/{index.js → cjs/index.js} +1 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/{shared.js → cjs/shared.js} +1 -0
- package/dist/cjs/shared.js.map +1 -0
- package/dist/esm/base.js +2 -0
- package/dist/esm/base.js.map +1 -0
- package/dist/esm/components/Edge/Path/index.js +2 -0
- package/dist/esm/components/Edge/Path/index.js.map +1 -0
- package/dist/esm/components/Edge/index.js +3 -0
- package/dist/esm/components/Edge/index.js.map +1 -0
- package/dist/esm/components/Edges/Connections/index.js +44 -0
- package/dist/esm/components/Edges/Connections/index.js.map +1 -0
- package/dist/esm/components/Edges/index.js +12 -0
- package/dist/esm/components/Edges/index.js.map +1 -0
- package/dist/esm/components/Graph/Grid/index.js +56 -0
- package/dist/esm/components/Graph/Grid/index.js.map +1 -0
- package/dist/esm/components/Graph/index.js +18 -0
- package/dist/esm/components/Graph/index.js.map +1 -0
- package/dist/esm/components/Interaction/Controls/index.js +126 -0
- package/dist/esm/components/Interaction/Controls/index.js.map +1 -0
- package/dist/esm/components/Interaction/index.js +95 -0
- package/dist/esm/components/Interaction/index.js.map +1 -0
- package/dist/esm/components/Node/MoveNode/index.js +188 -0
- package/dist/esm/components/Node/MoveNode/index.js.map +1 -0
- package/dist/esm/components/Node/PullNode/index.js +114 -0
- package/dist/esm/components/Node/PullNode/index.js.map +1 -0
- package/dist/esm/components/Node/index.js +135 -0
- package/dist/esm/components/Node/index.js.map +1 -0
- package/dist/esm/components/Nodes/Interaction/index.js +65 -0
- package/dist/esm/components/Nodes/Interaction/index.js.map +1 -0
- package/dist/esm/components/Nodes/index.js +9 -0
- package/dist/esm/components/Nodes/index.js.map +1 -0
- package/dist/esm/components/index.js +6 -0
- package/dist/esm/components/index.js.map +1 -0
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/shared.js +3 -0
- package/dist/esm/shared.js.map +1 -0
- package/package.json +26 -23
- package/dist/components/Edges/index.js +0 -29
- package/dist/components/Nodes/index.js +0 -26
- /package/dist/{base.d.ts → esm/base.d.ts} +0 -0
- /package/dist/{components → esm/components}/Edge/Path/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Edge/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Edges/Connections/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Edges/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Graph/Grid/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Graph/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Interaction/Controls/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Interaction/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Node/MoveNode/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Node/PullNode/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Node/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Nodes/Interaction/index.d.ts +0 -0
- /package/dist/{components → esm/components}/Nodes/index.d.ts +0 -0
- /package/dist/{components → esm/components}/index.d.ts +0 -0
- /package/dist/{index.d.ts → esm/index.d.ts} +0 -0
- /package/dist/{shared.d.ts → esm/shared.d.ts} +0 -0
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMode, useOnMode } from '../../../shared';
|
|
3
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
4
|
+
const CLICK_TIME = 500;
|
|
5
|
+
const useDoubleTap = () => {
|
|
6
|
+
const timer = useRef(undefined);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
return () => {
|
|
9
|
+
if (timer.current) {
|
|
10
|
+
clearTimeout(timer.current);
|
|
11
|
+
timer.current = undefined;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
}, []);
|
|
15
|
+
return useCallback((callback, threshold = CLICK_TIME) => {
|
|
16
|
+
if (timer.current) {
|
|
17
|
+
clearTimeout(timer.current);
|
|
18
|
+
timer.current = undefined;
|
|
19
|
+
callback();
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
timer.current = setTimeout(() => {
|
|
23
|
+
timer.current = undefined;
|
|
24
|
+
}, threshold);
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
}, []);
|
|
28
|
+
};
|
|
29
|
+
const Controls = ({ onMouseDown, onMouseUp, onTouchEnd, onTouchStart }) => {
|
|
30
|
+
const graphMode = useMode() ?? 'move';
|
|
31
|
+
const onMode = useOnMode();
|
|
32
|
+
const pointerPosition = useRef({
|
|
33
|
+
mouse: {
|
|
34
|
+
x: 0,
|
|
35
|
+
y: 0
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
const handleDoubleTap = useDoubleTap();
|
|
39
|
+
const handleTapEnd = useCallback(() => {
|
|
40
|
+
if (onMode) {
|
|
41
|
+
switch (graphMode) {
|
|
42
|
+
case 'move': {
|
|
43
|
+
handleDoubleTap(() => {
|
|
44
|
+
onMode('pull');
|
|
45
|
+
});
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
case 'pull': {
|
|
49
|
+
handleDoubleTap(() => {
|
|
50
|
+
onMode('select');
|
|
51
|
+
});
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
case 'select': {
|
|
55
|
+
handleDoubleTap(() => {
|
|
56
|
+
onMode('move');
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}, [
|
|
62
|
+
graphMode,
|
|
63
|
+
handleDoubleTap,
|
|
64
|
+
onMode
|
|
65
|
+
]);
|
|
66
|
+
const handleMouseDown = useCallback((event) => {
|
|
67
|
+
pointerPosition.current = {
|
|
68
|
+
mouse: {
|
|
69
|
+
x: event.clientX,
|
|
70
|
+
y: event.clientY
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
if (onMouseDown) {
|
|
74
|
+
onMouseDown(event);
|
|
75
|
+
}
|
|
76
|
+
}, [
|
|
77
|
+
onMouseDown
|
|
78
|
+
]);
|
|
79
|
+
const handleMouseUp = useCallback((event) => {
|
|
80
|
+
if (pointerPosition.current['mouse']?.x === Math.round(event.clientX) &&
|
|
81
|
+
pointerPosition.current['mouse']?.y === Math.round(event.clientY)) {
|
|
82
|
+
handleTapEnd();
|
|
83
|
+
}
|
|
84
|
+
if (onMouseUp) {
|
|
85
|
+
onMouseUp(event);
|
|
86
|
+
}
|
|
87
|
+
}, [
|
|
88
|
+
handleTapEnd,
|
|
89
|
+
onMouseUp
|
|
90
|
+
]);
|
|
91
|
+
const handleTouchStart = useCallback((event) => {
|
|
92
|
+
for (const [index, touch] of Object.entries(event.changedTouches)) {
|
|
93
|
+
pointerPosition.current[touch.identifier] = {
|
|
94
|
+
x: touch.clientX,
|
|
95
|
+
y: touch.clientY
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
if (onTouchStart) {
|
|
99
|
+
onTouchStart(event);
|
|
100
|
+
}
|
|
101
|
+
}, [
|
|
102
|
+
onTouchStart
|
|
103
|
+
]);
|
|
104
|
+
const handleTouchEnd = useCallback((event) => {
|
|
105
|
+
let shouldHandleTapEnd = false;
|
|
106
|
+
for (const [index, touch] of Object.entries(event.changedTouches)) {
|
|
107
|
+
if (pointerPosition.current[touch.identifier]?.x === touch.clientX &&
|
|
108
|
+
pointerPosition.current[touch.identifier]?.y === touch.clientY) {
|
|
109
|
+
shouldHandleTapEnd = true;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
if (shouldHandleTapEnd) {
|
|
113
|
+
handleTapEnd();
|
|
114
|
+
}
|
|
115
|
+
if (onTouchEnd) {
|
|
116
|
+
onTouchEnd(event);
|
|
117
|
+
}
|
|
118
|
+
}, [
|
|
119
|
+
handleTapEnd,
|
|
120
|
+
onTouchEnd
|
|
121
|
+
]);
|
|
122
|
+
return (_jsx("div", { className: 'lincle-interactive-container', onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTouchEnd: handleTouchEnd, onTouchStart: handleTouchStart, role: 'none' }));
|
|
123
|
+
};
|
|
124
|
+
Controls.displayName = 'LincleInteractiveControls';
|
|
125
|
+
export default Controls;
|
|
126
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Interaction/Controls/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMaxScale, useMinScale, useModeGiven, useOnMode, useOnScale, useOnTranslate, usePan, useScale, useTranslate, useZoom } from '../../shared';
|
|
3
|
+
import Controls from './Controls';
|
|
4
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
5
|
+
import { MapInteraction } from 'react-map-interaction';
|
|
6
|
+
const controls = () => {
|
|
7
|
+
return _jsx(Controls, {});
|
|
8
|
+
};
|
|
9
|
+
const Interaction = () => {
|
|
10
|
+
const scale = useScale();
|
|
11
|
+
const onScale = useOnScale();
|
|
12
|
+
const translate = useTranslate();
|
|
13
|
+
const onTranslate = useOnTranslate();
|
|
14
|
+
const givenMode = useModeGiven();
|
|
15
|
+
const onMode = useOnMode();
|
|
16
|
+
const maxScale = useMaxScale();
|
|
17
|
+
const minScale = useMinScale();
|
|
18
|
+
const pan = usePan();
|
|
19
|
+
const zoom = useZoom();
|
|
20
|
+
const keypress = useRef(false);
|
|
21
|
+
const handleMode = useCallback((changedMode) => {
|
|
22
|
+
if (onMode) {
|
|
23
|
+
onMode(changedMode);
|
|
24
|
+
}
|
|
25
|
+
}, [
|
|
26
|
+
onMode
|
|
27
|
+
]);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (givenMode) {
|
|
30
|
+
return () => {
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
const onKeyDown = (event) => {
|
|
34
|
+
keypress.current = true;
|
|
35
|
+
if (event.shiftKey) {
|
|
36
|
+
handleMode('pull');
|
|
37
|
+
}
|
|
38
|
+
else if (event.ctrlKey) {
|
|
39
|
+
handleMode('select');
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const onKeyUp = (event) => {
|
|
43
|
+
keypress.current = false;
|
|
44
|
+
if (!event.shiftKey) {
|
|
45
|
+
handleMode('move');
|
|
46
|
+
}
|
|
47
|
+
else if (!event.ctrlKey) {
|
|
48
|
+
handleMode('move');
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
window.addEventListener('keydown', onKeyDown);
|
|
52
|
+
window.addEventListener('keyup', onKeyUp);
|
|
53
|
+
return () => {
|
|
54
|
+
keypress.current = false;
|
|
55
|
+
window.removeEventListener('keydown', onKeyDown);
|
|
56
|
+
window.removeEventListener('keyup', onKeyUp);
|
|
57
|
+
};
|
|
58
|
+
}, [
|
|
59
|
+
givenMode,
|
|
60
|
+
handleMode
|
|
61
|
+
]);
|
|
62
|
+
const defaultTranslation = useMemo(() => {
|
|
63
|
+
return {
|
|
64
|
+
x: Math.round(translate.x),
|
|
65
|
+
y: Math.round(translate.y)
|
|
66
|
+
};
|
|
67
|
+
}, []);
|
|
68
|
+
const handleChange = useCallback(({ scale: z, translation: { x, y } }) => {
|
|
69
|
+
if (onTranslate) {
|
|
70
|
+
onTranslate({
|
|
71
|
+
x,
|
|
72
|
+
y
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
if (onScale) {
|
|
76
|
+
onScale(z);
|
|
77
|
+
}
|
|
78
|
+
}, [
|
|
79
|
+
onScale,
|
|
80
|
+
onTranslate
|
|
81
|
+
]);
|
|
82
|
+
const transform = useMemo(() => {
|
|
83
|
+
return {
|
|
84
|
+
scale,
|
|
85
|
+
translation: translate
|
|
86
|
+
};
|
|
87
|
+
}, [
|
|
88
|
+
scale,
|
|
89
|
+
translate
|
|
90
|
+
]);
|
|
91
|
+
return (_jsx("div", { className: 'lincle-interactive-container', children: _jsx(MapInteraction, { defaultScale: scale, defaultTranslation: defaultTranslation, disablePan: !pan, disableZoom: !zoom, maxScale: maxScale, minScale: minScale, onChange: handleChange, value: transform, children: controls }) }));
|
|
92
|
+
};
|
|
93
|
+
Interaction.displayName = 'LincleInteractiveInteraction';
|
|
94
|
+
export default Interaction;
|
|
95
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Interaction/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Node } from '../../../base';
|
|
3
|
+
import { useScale, useSnap } from '../../../shared';
|
|
4
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
5
|
+
import { DraggableCore } from 'react-draggable';
|
|
6
|
+
const PRESS_TIME = 500;
|
|
7
|
+
const emptySnap = [
|
|
8
|
+
1,
|
|
9
|
+
1
|
|
10
|
+
];
|
|
11
|
+
const MoveNode = ({ children, className, disabled, height, id, mode, onDrag, onSelect, onStart, onStop, shape, snap: givenSnap, style, width, x, y }) => {
|
|
12
|
+
const scale = useScale();
|
|
13
|
+
const snap = useSnap();
|
|
14
|
+
const [snapX = 1, snapY = 1] = useMemo(() => {
|
|
15
|
+
if (givenSnap === undefined) {
|
|
16
|
+
if (Array.isArray(snap)) {
|
|
17
|
+
return snap;
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
return emptySnap;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
else if (Array.isArray(givenSnap)) {
|
|
24
|
+
return givenSnap;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
return emptySnap;
|
|
28
|
+
}
|
|
29
|
+
}, [
|
|
30
|
+
givenSnap,
|
|
31
|
+
snap
|
|
32
|
+
]);
|
|
33
|
+
const [position, setPosition] = useState({
|
|
34
|
+
x,
|
|
35
|
+
y
|
|
36
|
+
});
|
|
37
|
+
const mouseDown = useRef(false);
|
|
38
|
+
const initialPos = useRef(position);
|
|
39
|
+
if (!mouseDown.current && (x !== initialPos.current.x ||
|
|
40
|
+
y !== initialPos.current.y) && (x !== position.x ||
|
|
41
|
+
y !== position.y)) {
|
|
42
|
+
setPosition({
|
|
43
|
+
x,
|
|
44
|
+
y
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
const pos = useRef(position);
|
|
48
|
+
const snapped = useRef(position);
|
|
49
|
+
snapped.current = position;
|
|
50
|
+
const moved = useRef(false);
|
|
51
|
+
const press = useRef(undefined);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
return () => {
|
|
54
|
+
if (press.current) {
|
|
55
|
+
clearTimeout(press.current);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}, []);
|
|
59
|
+
const handleOnSelect = useCallback(() => {
|
|
60
|
+
if (onSelect) {
|
|
61
|
+
onSelect(id);
|
|
62
|
+
}
|
|
63
|
+
}, [
|
|
64
|
+
id,
|
|
65
|
+
onSelect
|
|
66
|
+
]);
|
|
67
|
+
const handlePressStart = useCallback(() => {
|
|
68
|
+
if (mode !== 'select' &&
|
|
69
|
+
!press.current) {
|
|
70
|
+
press.current = setTimeout(() => {
|
|
71
|
+
handleOnSelect();
|
|
72
|
+
press.current = undefined;
|
|
73
|
+
}, PRESS_TIME);
|
|
74
|
+
}
|
|
75
|
+
}, [
|
|
76
|
+
handleOnSelect,
|
|
77
|
+
mode
|
|
78
|
+
]);
|
|
79
|
+
const handlePressStop = useCallback(() => {
|
|
80
|
+
if (press.current) {
|
|
81
|
+
clearTimeout(press.current);
|
|
82
|
+
press.current = undefined;
|
|
83
|
+
}
|
|
84
|
+
}, []);
|
|
85
|
+
const handleStart = useCallback((event) => {
|
|
86
|
+
event.stopPropagation();
|
|
87
|
+
mouseDown.current = true;
|
|
88
|
+
if (onSelect) {
|
|
89
|
+
handlePressStart();
|
|
90
|
+
}
|
|
91
|
+
if (onStart) {
|
|
92
|
+
onStart(event);
|
|
93
|
+
}
|
|
94
|
+
}, [
|
|
95
|
+
handlePressStart,
|
|
96
|
+
onSelect,
|
|
97
|
+
onStart
|
|
98
|
+
]);
|
|
99
|
+
const handleDrag = useCallback((event, data) => {
|
|
100
|
+
event.stopPropagation();
|
|
101
|
+
const currentX = pos.current.x;
|
|
102
|
+
const currentY = pos.current.y;
|
|
103
|
+
if (!disabled &&
|
|
104
|
+
(currentX || currentX === 0) &&
|
|
105
|
+
(currentY || currentY === 0)) {
|
|
106
|
+
if (onSelect) {
|
|
107
|
+
handlePressStop();
|
|
108
|
+
}
|
|
109
|
+
pos.current = {
|
|
110
|
+
x: currentX + data.deltaX,
|
|
111
|
+
y: currentY + data.deltaY
|
|
112
|
+
};
|
|
113
|
+
const adjustedPosition = {
|
|
114
|
+
x: Math.floor((currentX + snapX / 2) / snapX) * snapX,
|
|
115
|
+
y: Math.floor((currentY + snapY / 2) / snapY) * snapY
|
|
116
|
+
};
|
|
117
|
+
setPosition(adjustedPosition);
|
|
118
|
+
if (onDrag) {
|
|
119
|
+
onDrag(event, {
|
|
120
|
+
...data,
|
|
121
|
+
...adjustedPosition
|
|
122
|
+
}, snapped.current);
|
|
123
|
+
}
|
|
124
|
+
if (moved.current === false) {
|
|
125
|
+
moved.current = true;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}, [
|
|
129
|
+
disabled,
|
|
130
|
+
handlePressStop,
|
|
131
|
+
onDrag,
|
|
132
|
+
onSelect,
|
|
133
|
+
snapX,
|
|
134
|
+
snapY
|
|
135
|
+
]);
|
|
136
|
+
const handleStop = useCallback((event, data) => {
|
|
137
|
+
mouseDown.current = false;
|
|
138
|
+
if (onSelect && !press.current ||
|
|
139
|
+
mode === 'select' ||
|
|
140
|
+
moved.current) {
|
|
141
|
+
event.stopPropagation();
|
|
142
|
+
}
|
|
143
|
+
if (!disabled) {
|
|
144
|
+
if (moved.current === false &&
|
|
145
|
+
mode === 'select') {
|
|
146
|
+
handleOnSelect();
|
|
147
|
+
}
|
|
148
|
+
if (onSelect) {
|
|
149
|
+
handlePressStop();
|
|
150
|
+
}
|
|
151
|
+
const addX = snapped.current.x || snapped.current.x === 0 ?
|
|
152
|
+
snapped.current.x + data.deltaX :
|
|
153
|
+
0;
|
|
154
|
+
const addY = snapped.current.y || snapped.current.y === 0 ?
|
|
155
|
+
snapped.current.y + data.deltaY :
|
|
156
|
+
0;
|
|
157
|
+
const adjustedPosition = {
|
|
158
|
+
x: addX - addX % snapX,
|
|
159
|
+
y: addY - addY % snapY
|
|
160
|
+
};
|
|
161
|
+
setPosition({
|
|
162
|
+
x: adjustedPosition.x,
|
|
163
|
+
y: adjustedPosition.y
|
|
164
|
+
});
|
|
165
|
+
if (onStop) {
|
|
166
|
+
onStop(event, {
|
|
167
|
+
...data,
|
|
168
|
+
...adjustedPosition
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
moved.current = false;
|
|
172
|
+
}
|
|
173
|
+
}, [
|
|
174
|
+
disabled,
|
|
175
|
+
handleOnSelect,
|
|
176
|
+
handlePressStop,
|
|
177
|
+
mode,
|
|
178
|
+
onSelect,
|
|
179
|
+
onStop,
|
|
180
|
+
snapX,
|
|
181
|
+
snapY
|
|
182
|
+
]);
|
|
183
|
+
const nodeRef = useRef(null);
|
|
184
|
+
return (_jsx(DraggableCore, { disabled: disabled, nodeRef: nodeRef, onDrag: handleDrag, onStart: handleStart, onStop: handleStop, scale: scale, children: _jsx(Node, { className: className, height: height, id: id, ref: nodeRef, shape: shape, style: style, width: width, x: position.x, y: position.y, children: children }) }));
|
|
185
|
+
};
|
|
186
|
+
MoveNode.displayName = 'LincleInteractiveMoveNode';
|
|
187
|
+
export default MoveNode;
|
|
188
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Node/MoveNode/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useDiagramId, useNodePositions, useOnNodeEdgeDrop, useScale, useSetConnection } from '../../../shared';
|
|
3
|
+
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
4
|
+
import { DraggableCore } from 'react-draggable';
|
|
5
|
+
const PullNode = ({ className, disabled, height = 0, line = 'direct', onDrag, onEdgeDrop: givenOnEdgeDrop, onStart, onStop, shape = 'oval', sourceId, style, width = 0, x = 0, y = 0 }) => {
|
|
6
|
+
const diagramId = useDiagramId();
|
|
7
|
+
const nodePositions = useNodePositions();
|
|
8
|
+
const setConnection = useSetConnection(sourceId);
|
|
9
|
+
const onNodeEdgeDrop = useOnNodeEdgeDrop();
|
|
10
|
+
const onEdgeDrop = givenOnEdgeDrop ?? onNodeEdgeDrop;
|
|
11
|
+
const scale = useScale();
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
return () => {
|
|
14
|
+
setConnection();
|
|
15
|
+
};
|
|
16
|
+
}, []);
|
|
17
|
+
const handleStart = useCallback((event) => {
|
|
18
|
+
event.stopPropagation();
|
|
19
|
+
if (!disabled &&
|
|
20
|
+
onStart) {
|
|
21
|
+
onStart(event);
|
|
22
|
+
}
|
|
23
|
+
}, [
|
|
24
|
+
disabled,
|
|
25
|
+
onStart
|
|
26
|
+
]);
|
|
27
|
+
const handleDrag = useCallback((event, data) => {
|
|
28
|
+
event.stopPropagation();
|
|
29
|
+
if (!disabled) {
|
|
30
|
+
setConnection({
|
|
31
|
+
line,
|
|
32
|
+
source: {
|
|
33
|
+
height,
|
|
34
|
+
id: sourceId,
|
|
35
|
+
shape,
|
|
36
|
+
width,
|
|
37
|
+
x,
|
|
38
|
+
y
|
|
39
|
+
},
|
|
40
|
+
target: {
|
|
41
|
+
height: 0,
|
|
42
|
+
id: sourceId,
|
|
43
|
+
shape,
|
|
44
|
+
width: 0,
|
|
45
|
+
x: data.x ?? 0,
|
|
46
|
+
y: data.y ?? 0
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
if (onDrag) {
|
|
50
|
+
onDrag(event, data);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, [
|
|
54
|
+
disabled,
|
|
55
|
+
height,
|
|
56
|
+
line,
|
|
57
|
+
onDrag,
|
|
58
|
+
setConnection,
|
|
59
|
+
shape,
|
|
60
|
+
sourceId,
|
|
61
|
+
width,
|
|
62
|
+
x,
|
|
63
|
+
y
|
|
64
|
+
]);
|
|
65
|
+
const handleStop = useCallback((event, data) => {
|
|
66
|
+
event.stopPropagation();
|
|
67
|
+
setConnection();
|
|
68
|
+
if (onStop) {
|
|
69
|
+
onStop(event, data);
|
|
70
|
+
}
|
|
71
|
+
if (onEdgeDrop &&
|
|
72
|
+
nodePositions) {
|
|
73
|
+
nodePositions.match(data.x, data.y).then((match) => {
|
|
74
|
+
onEdgeDrop(event, sourceId, Boolean(match) || match === 0 ?
|
|
75
|
+
match :
|
|
76
|
+
undefined);
|
|
77
|
+
}).catch(() => {
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
}, [
|
|
81
|
+
nodePositions,
|
|
82
|
+
onEdgeDrop,
|
|
83
|
+
onStop,
|
|
84
|
+
setConnection,
|
|
85
|
+
sourceId
|
|
86
|
+
]);
|
|
87
|
+
const viewStyle = useMemo(() => {
|
|
88
|
+
return {
|
|
89
|
+
borderRadius: shape === 'oval' ?
|
|
90
|
+
50 :
|
|
91
|
+
undefined,
|
|
92
|
+
height,
|
|
93
|
+
left: x,
|
|
94
|
+
position: 'absolute',
|
|
95
|
+
top: y,
|
|
96
|
+
width,
|
|
97
|
+
...style
|
|
98
|
+
};
|
|
99
|
+
}, [
|
|
100
|
+
height,
|
|
101
|
+
shape,
|
|
102
|
+
style,
|
|
103
|
+
width,
|
|
104
|
+
x,
|
|
105
|
+
y
|
|
106
|
+
]);
|
|
107
|
+
const nodeRef = useRef(null);
|
|
108
|
+
return diagramId ?
|
|
109
|
+
_jsx(DraggableCore, { disabled: disabled, nodeRef: nodeRef, onDrag: handleDrag, onStart: handleStart, onStop: handleStop, scale: scale, children: _jsx("div", { className: className, ref: nodeRef, style: viewStyle }) }) :
|
|
110
|
+
null;
|
|
111
|
+
};
|
|
112
|
+
PullNode.displayName = 'LincleInteractivePullNode';
|
|
113
|
+
export default PullNode;
|
|
114
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Node/PullNode/index.tsx"],"names":[],"mappings":"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"}
|