Introduction to moveable mixin

This is a part of komitywa#208.
Previously we were using jquery-ui draggable in order to move objects.

In future we should refactor this mixin to use css transform property instead of top/left.
This is why:
https://csstriggers.com/left vs https://csstriggers.com/transform

src/js/modules/components/moveable-mixin.js

@@ -0,0 +1,43 @@
+export const MOVE_END = 'moveend';
+export const MOVE_START = 'movestart';
+const PREVENT_SELECT_CLASS = 'noselect';
+
+function moveableMixin(viewInstance) {
+  let isDragging = false;
+  const offset = {};
+  const position = { x: 0, y: 0 };
+  const element = viewInstance.el;
+
+  element.classList.add(PREVENT_SELECT_CLASS);
+
+  viewInstance.onMousedown = ({ clientX, clientY }) => {
+    offset.x = clientX - element.offsetLeft;
+    offset.y = clientY - element.offsetTop;
+    isDragging = true;
+    viewInstance.trigger(MOVE_START);
+  };
+
+  viewInstance.onMouseup = () => {
+    isDragging = false;
+    viewInstance.trigger(MOVE_END, position);
+  };
+
+  viewInstance.onMousemove = ({ clientX, clientY }) => {
+    if (isDragging) {
+      position.x = clientX - offset.x;
+      position.y = clientY - offset.y;
+      element.style.top = `${position.y}px`;
+      element.style.left = `${position.x}px`;
+    }
+  };
+
+  viewInstance.events = {
+    ...viewInstance.events,
+    mousedown: 'onMousedown',
+    mouseup: 'onMouseup',
+    mousemove: 'onMousemove',
+  };
+  viewInstance.delegateEvents();
+}
+
+export default moveableMixin;

src/js/modules/plant/object.js

@@ -2,18 +2,15 @@ import lodash from 'lodash';
 import { View } from '../../core';
 import PlantViewTools from '../plant/tools';
 import Const from '../../const';
+import moveableMixin, { MOVE_END } from '../components/moveable-mixin';
 
 export default View.extend({
   className: 'plantingjs-plantedobject-container ui-draggable ui-draggable-handle',
   template: require('./object.hbs'),
-
   events: {
-    'dragstart': 'dragstart',
-    'dragstop': 'saveCoords',
     'mouseover': 'setUserActivity',
     'mouseleave': 'unsetUserActivity',
   },
-
   $img: null,
 
   initialize: function(options) {
@@ -35,12 +32,14 @@ export default View.extend({
       options: this.app.data.options,
     });
 
-    this.$el.draggable({
-      cancel: '.icon-loop, .icon-trash, .icon-resize',
-    });
     this.model
       .on('change:currentProjection', this.updateProjection, this)
       .on('change:layerIndex', this.setLayer, this);
+
+    if (this.app.getState() !== Const.State.VIEWER) {
+      moveableMixin(this);
+      this.on(MOVE_END, this.model.set, this.model);
+    }
   },
 
   render: function() {
@@ -74,26 +73,11 @@ export default View.extend({
     this.$img.attr('src', model.getProjection());
   },
 
-  saveCoords: function(ev, ui) {
-    this.model.set({
-      x: ui.position.left,
-      y: ui.position.top,
-    });
-
-    return this;
-  },
-
   setUserActivity: function() {
     this.model.set('userActivity', true);
   },
 
   unsetUserActivity: function() {
     this.model.set('userActivity', false);
   },
-
-  dragstart: function(ev) {
-    if (this.app.getState() === Const.State.VIEWER) {
-      ev.preventDefault();
-    }
-  },
 });