feat: round x,y on drag end

Author: singuerinc

app/components/guide/Guide.tsx

@@ -62,6 +62,14 @@ class GuideView extends React.Component<IGuide & IProps, IState> {
     setPositionInDOM(el, this.state.x, this.state.y);
 
     interactjs(el).draggable({
+      onend: ({ target }) => {
+        const x = parseInt(target.getAttribute('data-x'), 10);
+        const y = parseInt(target.getAttribute('data-y'), 10);
+
+        setPositionInDOM(el, x, y);
+
+        this.setState(move(x, y));
+      },
       onmove: ({ dx, dy, target }) => {
         if (this.props.locked) {
           return;

app/components/onionImage/OnionImage.tsx

@@ -131,6 +131,14 @@ class OnionImageView extends React.Component<IOnionImage & IProps, IState> {
     el.addEventListener('mouseout', this.unbindKeys);
 
     interactjs(el).draggable({
+      onend: ({ target }) => {
+        const x = parseInt(target.getAttribute('data-x'), 10);
+        const y = parseInt(target.getAttribute('data-y'), 10);
+
+        setPositionInDOM(el, x, y);
+
+        this.setState(move(x, y));
+      },
       onmove: ({ dx, dy, target }) => {
         if (this.props.locked) {
           return;

app/components/ruler/Ruler.tsx

@@ -66,6 +66,14 @@ class RulerView extends React.Component<IRuler & IProps, IState> {
     setPositionInDOM(el, this.state.x, this.state.y);
 
     interactjs(el).draggable({
+      onend: ({ target }) => {
+        const x = parseInt(target.getAttribute('data-x'), 10);
+        const y = parseInt(target.getAttribute('data-y'), 10);
+
+        setPositionInDOM(el, x, y);
+
+        this.setState(move(x, y));
+      },
       onmove: ({ dx, dy, target }) => {
         if (this.props.locked) {
           return;