Cleaning up drag-and-drop implementation and adding position constraints.

Author: Greg MacWilliam

source/javascripts/models/meme.js

@@ -56,6 +56,12 @@ MEME.MemeModel = Backbone.Model.extend({
     });
   },
 
+  // Specifies if the background image currently has data:
+  hasBackground: function() {
+    return this.background.width && this.background.height;
+  },
+
+  // Loads a file stream into an image object:
   loadFileForImage: function(file, image) {
     var reader = new FileReader();
     reader.onload = function() { image.src = reader.result; };

source/javascripts/views/meme-canvas.js

@@ -6,8 +6,7 @@ MEME.MemeCanvasView = Backbone.View.extend({
 
   initialize: function() {
     var canvas = document.createElement('canvas');
-    var $container = $('#meme-canvas');
-    var _this = this;
+    var $container = MEME.$('#meme-canvas');
 
     // Display canvas, if enabled:
     if (canvas && canvas.getContext) {
@@ -21,17 +20,6 @@ MEME.MemeCanvasView = Backbone.View.extend({
 
     // Listen to model for changes, and re-render in response:
     this.listenTo(this.model, 'change', this.render);
-    // Allow for moving the background image within the canvas
-    $(this.canvas).on('mousedown', function(e) {
-      _this.startDrag(e);
-    });
-    $(document).on('mouseup', function(e) {
-      _this.stopDrag(e);
-    });
-    $(document).on('mousemove', function(e) {
-      _this.moveDrag(e);
-    });
-
   },
 
   setDownload: function() {
@@ -62,14 +50,12 @@ MEME.MemeCanvasView = Backbone.View.extend({
       var bw = m.background.width;
 
       if (bh && bw) {
-        var bp = m.get('backgroundPosition');
-
         // Transformed height and width:
         // Set the base position if null
         var th = bh * d.imageScale;
         var tw = bw * d.imageScale;
-        var cx = bp.x || d.width / 2;
-        var cy = bp.y || d.height / 2;
+        var cx = d.backgroundPosition.x || d.width / 2;
+        var cy = d.backgroundPosition.y || d.height / 2;
 
         ctx.drawImage(m.background, 0, 0, bw, bh, cx-(tw/2), cy-(th/2), tw, th);
       }
@@ -180,40 +166,47 @@ MEME.MemeCanvasView = Backbone.View.extend({
       'href': data,
       'download': (d.downloadName || 'share') + '.png'
     });
-  },
-
-  startDrag: function(e) {
 
-    if (e.button != null && e.button != 0) {
-      this._canMove = false;
-      return true;
-    }
-
-    this._canMove = true;
-    $('body').addClass('noselect');
-
-    this._startBG = this.model.get('backgroundPosition');
-    this._startPos = { x: e.clientX, y: e.clientY };
-    this.canvas.style.cursor = 'move';
+    // Enable drag cursor while canvas has artwork:
+    this.canvas.style.cursor = this.model.background.width ? 'move' : 'default';
   },
 
-  stopDrag: function(e) {
-    this._canMove = false;
-    $('body').removeClass('noselect');
-    this.canvas.style.cursor = 'default';
+  events: {
+    'mousedown canvas': 'onDrag'
   },
 
-  moveDrag: function(e) {
-    if (typeof(this._canMove) !== "undefined" && this._canMove) {
-      var origPos = this._startBG;
-
-      var position = {
-        x: origPos.x - (this._startPos.x - e.clientX),
-        y: origPos.y - (this._startPos.y - e.clientY)
-      };
-
-      this.model.set('backgroundPosition', position);
-
+  // Performs drag-and-drop on the background image placement:
+  onDrag: function(evt) {
+    evt.preventDefault();
+
+    // Return early if there is no background image:
+    if (!this.model.hasBackground()) return;
+
+    // Configure drag settings:
+    var model = this.model;
+    var d = model.toJSON();
+    var iw = model.background.width * d.imageScale / 2;
+    var ih = model.background.height * d.imageScale / 2;
+    var origin = {x: evt.clientX, y: evt.clientY};
+    var start = d.backgroundPosition;
+    start.x = start.x || d.width / 2;
+    start.y = start.y || d.height / 2;
+
+    // Create update function with draggable constraints:
+    function update(evt) {
+      evt.preventDefault();
+      model.set('backgroundPosition', {
+        x: Math.max(d.width-iw, Math.min(start.x - (origin.x - evt.clientX), iw)),
+        y: Math.max(d.height-ih, Math.min(start.y - (origin.y - evt.clientY), ih))
+      });
     }
+
+    // Perform drag sequence:
+    var $doc = MEME.$(document)
+      .on('mousemove.drag', update)
+      .on('mouseup.drag', function(evt) {
+        $doc.off('mouseup.drag mousemove.drag');
+        update(evt);
+      });
   }
 });