alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nodes): drag nodes on touch screens

Browse Source
This commit is contained in:
moklick
2020-05-05 16:03:28 +02:00
parent d77ee2c0e2
commit 6c641a15ee
6 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dist/ReactFlow.esm.js vendored
View File

@@ -9165,9 +9165,10 @@ var ResizeObserver_2 = ResizeObserver_1.ResizeObserver;
var ResizeObserver_3 = ResizeObserver_1.install;
var onStart = function (evt, onClick, id, type, data, setOffset, transform, position) {
var startEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
var scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
x: startEvt.clientX * (1 / transform[2]),
y: startEvt.clientY * (1 / transform[2]),
};
var offsetX = scaledClient.x - position.x - transform[0];
var offsetY = scaledClient.y - position.y - transform[1];
@@ -9177,9 +9178,10 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
onClick(node);
};
var onDrag = function (evt, setDragging, id, offset, transform) {
var dragEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
var scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
x: dragEvt.clientX * (1 / transform[2]),
y: dragEvt.clientY * (1 / transform[2]),
};
setDragging(true);
store.dispatch.updateNodePos({

2
dist/ReactFlow.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
dist/ReactFlow.js vendored
View File

@@ -9172,9 +9172,10 @@ var ResizeObserver_2 = ResizeObserver_1.ResizeObserver;
var ResizeObserver_3 = ResizeObserver_1.install;
var onStart = function (evt, onClick, id, type, data, setOffset, transform, position) {
var startEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
var scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
x: startEvt.clientX * (1 / transform[2]),
y: startEvt.clientY * (1 / transform[2]),
};
var offsetX = scaledClient.x - position.x - transform[0];
var offsetY = scaledClient.y - position.y - transform[1];
@@ -9184,9 +9185,10 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
onClick(node);
};
var onDrag = function (evt, setDragging, id, offset, transform) {
var dragEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
var scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
x: dragEvt.clientX * (1 / transform[2]),
y: dragEvt.clientY * (1 / transform[2]),
};
setDragging(true);
store.dispatch.updateNodePos({

2
dist/ReactFlow.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
src/components/Handle/BaseHandle.tsx
View File

@@ -155,7 +155,7 @@ const BaseHandle = memo(
data-nodeid={nodeIdWithHandleId}
data-handlepos={position}
className={handleClasses}
onMouseDown={evt =>
onMouseDown={(evt) =>
onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection)
}
{...rest}

22
src/components/Nodes/wrapNode.tsx
View File

@@ -8,7 +8,7 @@ import store from '../../store';
import { Node, XYPosition, Transform, ElementId, NodeComponentProps, WrapNodeProps } from '../../types';
const onStart = (
evt: MouseEvent,
evt: MouseEvent | TouchEvent,
onClick: (node: Node) => void,
id: ElementId,
type: string,
@@ -17,9 +17,11 @@ const onStart = (
transform: Transform,
position: XYPosition
): false | void => {
const startEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
const scaledClient: XYPosition = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
x: startEvt.clientX * (1 / transform[2]),
y: startEvt.clientY * (1 / transform[2]),
};
const offsetX = scaledClient.x - position.x - transform[0];
const offsetY = scaledClient.y - position.y - transform[1];
@@ -31,15 +33,17 @@ const onStart = (
};
const onDrag = (
evt: MouseEvent,
evt: MouseEvent | TouchEvent,
setDragging: (isDragging: boolean) => void,
id: ElementId,
offset: XYPosition,
transform: Transform
): void => {
const dragEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
const scaledClient = {
x: evt.clientX * (1 / transform[2]),
y: evt.clientY * (1 / transform[2]),
x: dragEvt.clientX * (1 / transform[2]),
y: dragEvt.clientY * (1 / transform[2]),
};
setDragging(true);
@@ -111,7 +115,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
if (nodeElement.current) {
updateNode();
const resizeObserver = new ResizeObserver(entries => {
const resizeObserver = new ResizeObserver((entries) => {
for (let _ of entries) {
updateNode();
}
@@ -131,8 +135,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
return (
<DraggableCore
onStart={evt => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
onDrag={evt => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
onStart={(evt) => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
onDrag={(evt) => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
scale={transform[2]}
disabled={!isInteractive}