mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 22:20:06 +02:00
Code Issues Releases Wiki Activity

Fix touches for topology

Browse Source
This commit is contained in:
JUDIT GRESKOVITS 2017-02-15 15:37:30 +00:00
parent 5f89203333
commit d7cadc384f
2 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/components/topology/graph-node.js
View File

@ -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}

27
ui/src/components/topology/topology-graph.js
View File

@ -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) => {