ensuring node can only be dragged within constraints

This commit is contained in:
Alex Windett 2017-03-20 12:40:03 +00:00 committed by Sérgio Ramos
parent 7a2a1f95a6
commit 5459220c77
2 changed files with 64 additions and 42 deletions

View File

@ -5,6 +5,7 @@ import Constants from './constants';
import GraphNode from './graph-node';
import GraphLink from './graph-link';
import React from 'react';
import { triggerMouseEvent } from '../../shared/functions';
const StyledSvg = styled.svg`
width: 100%;
@ -102,6 +103,28 @@ class TopologyGraph extends React.Component {
}
}
isWithinSVGBounds(target, x, y) {
const svgBounds = document
.getElementsByClassName('topology-svg')[0]
.getBoundingClientRect();
const nodeHeight = target.getBoundingClientRect().height;
const nodeWidth = target.getBoundingClientRect().width;
const constraints = {
top: svgBounds.top + (nodeHeight / 2),
left: svgBounds.left + (nodeWidth / 2),
bottom: svgBounds.bottom - (nodeHeight / 2),
right: svgBounds.right - (nodeWidth / 2)
};
if ( x > constraints.right || x < constraints.left ) return false;
if ( y < constraints.top || y > constraints.bottom ) return false;
return true;
}
render() {
const {
@ -123,6 +146,7 @@ class TopologyGraph extends React.Component {
x: svgSize.width - Constants.nodeSize.width,
y: 0
} : simNode(service.uuid);
return ({
...service,
...sNode
@ -143,37 +167,35 @@ class TopologyGraph extends React.Component {
// it's this node's position that we'll need to update
dragInfo.dragging = true;
dragInfo.nodeId = nodeId;
if(evt.changedTouches) {
const x = evt.changedTouches ? evt.changedTouches[0].pageX : evt.clientX;
const y = evt.changedTouches ? evt.changedTouches[0].pageY : evt.clientY;
dragInfo.position = {
x: evt.changedTouches[0].pageX,
y: evt.changedTouches[0].pageY
x,
y
};
}
else {
dragInfo.position = {
x: evt.clientX,
y: evt.clientY
};
}
};
const onDragMove = (evt) => {
if ( dragInfo.dragging ) {
let offset = {};
if(evt.changedTouches) {
offset = {
x: evt.changedTouches[0].pageX - dragInfo.position.x,
y: evt.changedTouches[0].pageY - dragInfo.position.y
};
const x = evt.changedTouches
? evt.changedTouches[0].pageX
: evt.clientX;
const y = evt.changedTouches
? evt.changedTouches[0].pageY
: evt.clientY;
if ( !this.isWithinSVGBounds(evt.target, x, y) ) {
triggerMouseEvent(evt.target, 'mouseup');
}
else {
offset = {
x: evt.clientX - dragInfo.position.x,
y: evt.clientY - dragInfo.position.y
const offset = {
x: x - dragInfo.position.x,
y: y - dragInfo.position.y
};
}
const dragNodes = nodes.map((simNode, index) => {
if ( simNode.id === dragInfo.nodeId ) {
@ -192,26 +214,18 @@ class TopologyGraph extends React.Component {
nodes: dragNodes
});
if(evt.changedTouches) {
dragInfo.position = {
x: evt.changedTouches[0].pageX,
y: evt.changedTouches[0].pageY
x,
y
};
}
else {
dragInfo.position = {
x: evt.clientX,
y: evt.clientY
};
}
}
};
const onDragEnd = (evt) => {
dragInfo = {
dragging: false,
nodeId: null,
position: null
position: {}
};
};
@ -241,6 +255,7 @@ class TopologyGraph extends React.Component {
onMouseUp={onDragEnd}
onTouchEnd={onDragEnd}
onTouchCancel={onDragEnd}
className='topology-svg'
>
<g>
{renderedNodes}

View File

@ -51,6 +51,12 @@ const isAnd = (...names) =>
? css(...args)
: css``;
const triggerMouseEvent = (trg, ev) => {
const clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent(ev, true, true);
trg.dispatchEvent(clickEvent);
};
export {
unitcalc,
remcalc,
@ -58,5 +64,6 @@ export {
rndId,
is,
isNot,
isAnd
isAnd,
triggerMouseEvent
};