mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
Fix touches for topology
This commit is contained in:
parent
5f89203333
commit
d7cadc384f
@ -86,11 +86,7 @@ const GraphNode = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<g
|
<g transform={`translate(${data.x}, ${data.y})`}>
|
||||||
transform={`translate(${data.x}, ${data.y})`}
|
|
||||||
onMouseDown={onStart}
|
|
||||||
onTouchStart={onStart}
|
|
||||||
>
|
|
||||||
<StyledShadowRect
|
<StyledShadowRect
|
||||||
x={-halfWidth}
|
x={-halfWidth}
|
||||||
y={3-halfHeight}
|
y={3-halfHeight}
|
||||||
@ -102,6 +98,8 @@ const GraphNode = ({
|
|||||||
y={-halfHeight}
|
y={-halfHeight}
|
||||||
width={width}
|
width={width}
|
||||||
height={height}
|
height={height}
|
||||||
|
onMouseDown={onStart}
|
||||||
|
onTouchStart={onStart}
|
||||||
/>
|
/>
|
||||||
<StyledLine
|
<StyledLine
|
||||||
x1={-halfWidth}
|
x1={-halfWidth}
|
||||||
|
@ -148,20 +148,37 @@ class TopologyGraph extends React.Component {
|
|||||||
// it's this node's position that we'll need to update
|
// it's this node's position that we'll need to update
|
||||||
dragInfo.dragging = true;
|
dragInfo.dragging = true;
|
||||||
dragInfo.nodeId = nodeId;
|
dragInfo.nodeId = nodeId;
|
||||||
|
if(evt.changedTouches) {
|
||||||
|
dragInfo.position = {
|
||||||
|
x: evt.changedTouches[0].pageX,
|
||||||
|
y: evt.changedTouches[0].pageY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
dragInfo.position = {
|
dragInfo.position = {
|
||||||
x: evt.clientX,
|
x: evt.clientX,
|
||||||
y: evt.clientY
|
y: evt.clientY
|
||||||
};
|
};
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDragMove = (evt) => {
|
const onDragMove = (evt) => {
|
||||||
|
|
||||||
if(dragInfo.dragging) {
|
if(dragInfo.dragging) {
|
||||||
|
|
||||||
const offset = {
|
let offset = {};
|
||||||
|
if(evt.changedTouches) {
|
||||||
|
offset = {
|
||||||
|
x: evt.changedTouches[0].pageX - dragInfo.position.x,
|
||||||
|
y: evt.changedTouches[0].pageY - dragInfo.position.y
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
offset = {
|
||||||
x: evt.clientX - dragInfo.position.x,
|
x: evt.clientX - dragInfo.position.x,
|
||||||
y: evt.clientY - dragInfo.position.y
|
y: evt.clientY - dragInfo.position.y
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
const dragNodes = simulationNodes.map((simNode, index) => {
|
const dragNodes = simulationNodes.map((simNode, index) => {
|
||||||
if(simNode.id === dragInfo.nodeId) {
|
if(simNode.id === dragInfo.nodeId) {
|
||||||
@ -180,11 +197,19 @@ class TopologyGraph extends React.Component {
|
|||||||
nodes: dragNodes
|
nodes: dragNodes
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if(evt.changedTouches) {
|
||||||
|
dragInfo.position = {
|
||||||
|
x: evt.changedTouches[0].pageX,
|
||||||
|
y: evt.changedTouches[0].pageY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
dragInfo.position = {
|
dragInfo.position = {
|
||||||
x: evt.clientX,
|
x: evt.clientX,
|
||||||
y: evt.clientY
|
y: evt.clientY
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDragEnd = (evt) => {
|
const onDragEnd = (evt) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user