Merging dragndrop

js/controller/PreviewFilmController.js

@@ -23,19 +23,132 @@
     };
 
     ns.PreviewFilmController.prototype.createPreviews = function () {
-      this.container.innerHTML = "";
-      for (var i = 0, l = this.framesheet.getFrameCount(); i < l ; i++) {
-        this.container.appendChild(this.createPreviewTile(i));
+      // TODO(vincz): Full redraw on any drawing modification, optimize.
+      this.container.html("");
+
+      var frameCount = this.framesheet.getFrameCount();
+      
+      for (var i = 0, l = frameCount; i < l ; i++) {
+        this.container.append(this.createInterstitialTile_(i));
+        this.container.append(this.createPreviewTile_(i));
+      }
+      this.container.append(this.createInterstitialTile_(frameCount));
+
+      var needDragndropBehavior = !!(frameCount > 1);
+      if(needDragndropBehavior) {
+      	this.initDragndropBehavior_();
       }
     };
 
-    ns.PreviewFilmController.prototype.createPreviewTile = function(tileNumber) {
+    /**
+     * @private
+     */
+    ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) {
+    	var initerstitialTile = document.createElement("div");
+		initerstitialTile.className = "interstitial-tile"
+		initerstitialTile.setAttribute("data-tile-type", "interstitial");
+		initerstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
+
+		return initerstitialTile;
+    };
+
+    /**
+     * @private
+     */
+    ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
+    	var tiles = $(".preview-tile");
+    	// Each preview film tile is draggable.
+    	tiles.draggable( {
+	      //containment: '.left-nav',
+	      stack: '.preview-tile',
+	      cursor: 'move',
+	      revert: true,
+	      start: function(event, ui) {
+	      	// We only show the fake interstitial tiles when starting the 
+	      	// drag n drop interaction. We hide them when the DnD is done.
+	      	$('#preview-list').addClass("show-interstitial-tiles");
+	      },
+	      stop: function() {
+	      	$('#preview-list').removeClass("show-interstitial-tiles");
+	      }
+	    });
+
+
+    	// Each preview film tile is a drop target. This allow us to swap two tiles.
+    	// However, we want to be able to insert a tile between two other tiles.
+    	// For that we created fake interstitial tiles that are used as drop targets as well.
+    	var droppableTiles = $(".interstitial-tile");
+    	$.merge(droppableTiles, tiles);
+
+	    droppableTiles.droppable( {
+	        accept: ".preview-tile",
+	        tolerance: "pointer",
+			activeClass: "droppable-active",
+			hoverClass: "droppable-hover-active",
+			drop: $.proxy(this.onDrop_, this)
+	    });
+    };
+
+    /**
+     * @private
+     */
+    ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) {
+		var activeFrame;
+		var originFrameId = parseInt($(event.srcElement).data("tile-number"), 10);
+		var dropTarget = $(event.target);
+		
+		if(dropTarget.data("tile-type") == "interstitial") {
+			var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
+			// In case we drop outside of the tile container
+			if(isNaN(originFrameId) || isNaN(targetInsertionId)) {
+				return;
+			}
+			console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId)
+			this.framesheet.moveFrame(originFrameId, targetInsertionId);
+			
+			activeFrame = targetInsertionId;
+			// The last fake interstitial tile is outside of the framesheet array bound.
+			// It allow us to append after the very last element in this fake slot.
+			// However, when setting back the active frame, we have to make sure the 
+			// frame does exist.
+			if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
+				activeFrame = targetInsertionId - 1;
+			}
+		}
+		else {
+			var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
+			// In case we drop outside of the tile container
+			if(isNaN(originFrameId) || isNaN(targetSwapId)) {
+				return;
+			}
+			console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId)
+			this.framesheet.swapFrames(originFrameId, targetSwapId);
+			activeFrame = targetSwapId;
+		}
+
+		
+		$('#preview-list').removeClass("show-interstitial-tiles");
+
+		// TODO(vincz): deprecate.
+		piskel.setActiveFrameAndRedraw(activeFrame);
+
+		// TODO(vincz): move localstorage request to the model layer?
+		$.publish(Events.LOCALSTORAGE_REQUEST);
+		
+	};
+
+	/**
+     * @private
+     * TODO(vincz): clean this giant rendering function & remove listeners.
+     */
+    ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
     	var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
     	//var width = frame.getWidth() * this.dpi,
     	//	height = frame.getHeight() * this.dpi;
 
 		var previewTileRoot = document.createElement("li");
 		var classname = "preview-tile";
+		previewTileRoot.setAttribute("data-tile-number", tileNumber);
 
 		if (piskel.getActiveFrameIndex() == tileNumber) {
 			classname += " selected";

js/lib/jquery-ui-package-info.txt

@@ -0,0 +1,14 @@
+
+jquery-ui-1.8.23.custom.js was generated at: http://http://jqueryui.com/download
+and contains:
+
+jQuery  ui core:
+	core
+	widget
+	position
+	mouse
+
+Interactions:
+	Draggable
+	Droppable
+	Resizable

js/model/FrameSheet.js

@@ -95,4 +95,29 @@
 		var frame = this.getFrameByIndex(index);
 		this.frames.splice(index + 1, 0, frame.clone());
 	};
+
+	ns.FrameSheet.prototype.moveFrame = function(originIndex, destinationIndex) {
+		var frameToMove = this.getFrameByIndex(originIndex);
+		this.frames.splice(destinationIndex, 0,frameToMove);
+
+		if(destinationIndex <= originIndex) {
+			originIndex++;
+		}
+		this.removeFrameByIndex(originIndex);
+	};
+
+	ns.FrameSheet.prototype.swapFrames = function(indexFrame1, indexFrame2) {
+		if(isNaN(indexFrame1) || isNaN(indexFrame1) ||
+		   (!this.hasFrameAtIndex(indexFrame1) && !this.hasFrameAtIndex(indexFrame2))) {
+		 	throw "Bad indexes for swapFrames Framesheet function.";
+		}
+		if(indexFrame1 == indexFrame2) {
+			return;
+		}
+		else {
+			var swapFrame = this.frames[indexFrame1];
+			this.frames[indexFrame1] = this.frames[indexFrame2];
+			this.frames[indexFrame2] = swapFrame;
+		}
+	};
 })();

js/piskel.js

@@ -73,7 +73,7 @@ $.namespace("pskl");
 
       this.previewsController = new pskl.controller.PreviewFilmController(
         frameSheet,
-        $('#preview-list')[0], 
+        $('#preview-list'), 
         previewTileCanvasDpi
       );