Added sortable,js to move layers, must implement history

js/_addColor.js

@@ -41,7 +41,7 @@ function addColor (newColor) {
         button.parentElement.firstChild.jscolor.show();
     });
 
-    console.log(currentPalette);
+    //console.log(currentPalette);
 
     return listItem;
 }

js/_clickedColor.js

@@ -17,7 +17,7 @@ function clickedColor (e){
         e.target.parentElement.classList.add('selected');
 
     } else if (e.which == 3) { //right clicked color
-        console.log('right clicked color button');
+        //console.log('right clicked color button');
 
         //hide edit color button (to prevent it from showing)
         e.target.parentElement.lastChild.classList.add('hidden');

js/_colorChanged.js

@@ -23,7 +23,7 @@ on('input', 'jscolor-hex-input', function (e) {
 
 //changes all of one color to another after being changed from color picker
 function colorChanged(e) {
-    console.log('colorChanged() to ' + e.target.value);
+    //console.log('colorChanged() to ' + e.target.value);
     //get colors
     var newColor = hexToRgb(e.target.value);
     var oldColor = e.target.oldColor;
@@ -41,7 +41,7 @@ function colorChanged(e) {
 
     //check if selected color already matches another color 
     colors = document.getElementsByClassName('color-button');
-    console.log(colors);
+    //console.log(colors);
     var colorCheckingStyle = 'background: #bc60c4; color: white';
     var newColorHex = e.target.value.toLowerCase();
 
@@ -54,11 +54,11 @@ function colorChanged(e) {
 
         //if generated color matches this color
         if (newColorHex == colors[i].jscolor.toString()) {
-            console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
+            //console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
 
             //if the color isnt the one that has the picker currently open
             if (!colors[i].parentElement.classList.contains('jscolor-active')) {
-                console.log('%cColor is duplicate', colorCheckingStyle);
+                //console.log('%cColor is duplicate', colorCheckingStyle);
 
                 //show the duplicate color warning
                 duplicateColorWarning.style.visibility = 'visible';

js/_deleteColor.js

@@ -9,19 +9,19 @@ function deleteColor (color) {
 
     //if color is a string, then find the corresponding button
     if (typeof color === 'string') {
-        console.log('trying to find ',color);
+        //console.log('trying to find ',color);
         //get all colors in palette
         colors = document.getElementsByClassName('color-button');
 
         //loop through colors
         for (var i = 0; i < colors.length; i++) {
-            console.log(color,'=',colors[i].jscolor.toString());
+            //console.log(color,'=',colors[i].jscolor.toString());
 
             if (color == colors[i].jscolor.toString()) {
-                console.log('match');
+                //console.log('match');
                 //set color to the color button
                 color = colors[i];
-                console.log('found color', color);
+                //console.log('found color', color);
 
                 //exit loop 
                 break;
@@ -30,7 +30,7 @@ function deleteColor (color) {
 
         //if the color wasn't found
         if (typeof color === 'string') {
-            console.log('color not found');
+            //console.log('color not found');
             //exit function
             return;
         }

js/_layer.js

@@ -1,8 +1,3 @@
-// Making the palette list sortable
-new Sortable(document.getElementById("layers-menu"), {
-    animation: 100
-});
-
 // HTML element that contains the layer entries
 let layerList;
 // A single layer entry (used as a prototype to create the new ones)
@@ -26,6 +21,8 @@ let isRenamingLayer = false;
 // I need to save this, trust me
 let oldLayerName = null;
 
+let dragStartLayer;
+
 // Binding the add layer button to the function
 on('click',"add-layer-button", addLayer, false);
 
@@ -122,57 +119,6 @@ class Layer {
         }
     }
 
-    // NEXTPULL: remove this
-    layerDragStart(element) {
-        layerDragSource = this;
-        element.dataTransfer.effectAllowed = 'move';
-        element.dataTransfer.setData('text/html', this.id);
-
-        this.classList.add('dragElem');
-    }
-
-    // NEXTPULL: remove this
-    layerDragOver(element) {
-        if (element.preventDefault) {
-            element.preventDefault(); // Necessary. Allows us to drop.
-        }
-        this.classList.add('layerdragover');
-
-        element.dataTransfer.dropEffect = 'move';
-
-        return false;
-    }
-
-    // NEXTPULL: remove this
-    layerDragLeave(element) {
-        this.classList.remove('layerdragover');
-    }
-
-    // NEXTPULL: remove this
-    layerDragDrop(element) {
-        if (element.stopPropagation) {
-            element.stopPropagation(); // Stops some browsers from redirecting.
-        }
-
-        // Don't do anything if dropping the same column we're dragging.
-        if (layerDragSource != this) {
-            let toDropID = element.dataTransfer.getData('text/html');
-            let thisID = this.id;
-
-            moveLayers(toDropID, thisID);
-        }
-
-        this.classList.remove('layerdragover');
-        dragging = false;
-
-        return false;
-    }
-
-    // NEXTPULL: remove this
-    layerDragEnd(element) {
-        this.classList.remove('layerdragover');
-    }
-
     // Resizes canvas
     resize() {
         let newWidth = (this.canvas.width * zoom) + 'px';
@@ -438,7 +384,6 @@ function merge(saveHistory = true) {
         // Updating the layer preview
         currentLayer.updateLayerPreview();
     }
-
 }
 
 function deleteLayer(saveHistory = true) {
@@ -541,78 +486,6 @@ function renameLayer(event) {
     isRenamingLayer = true;
 }
 
-// Swaps two layer entries in the layer menu
-function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
-    let toDrop = getLayerByID(toDropLayer);
-    let staticc = getLayerByID(staticLayer);
-    let layerCopy = layers.slice();
-
-    let beforeToDrop = toDrop.menuEntry.nextElementSibling;
-    let nMoved = 0;
-
-    layerCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
-
-    let toDropIndex = layerCopy.indexOf(toDrop);
-    let staticIndex = layerCopy.indexOf(staticc);
-
-    layerList.insertBefore(toDrop.menuEntry, staticc.menuEntry);
-
-    if (toDropIndex < staticIndex) {
-        let tmp = toDrop.canvas.style.zIndex;
-        let tmp2;
-
-        for (let i=toDropIndex+1; i<=staticIndex; i++) {
-            tmp2 = layerCopy[i].canvas.style.zIndex;
-
-            if (saveHistory) {
-                new HistoryStateMoveTwoLayers(layerCopy[i], tmp2, tmp);
-            }
-
-            layerCopy[i].canvas.style.zIndex = tmp;
-            tmp = tmp2;
-            nMoved++;
-        }
-
-        if (saveHistory) {
-            new HistoryStateMoveTwoLayers(toDrop, toDrop.canvas.style.zIndex, tmp);
-        }
-
-        toDrop.canvas.style.zIndex = tmp;
-
-        if (saveHistory) {
-            new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
-        }
-    }
-    else {
-        // BUG QUI
-        let tmp = toDrop.canvas.style.zIndex;
-        let tmp2;
-
-        for (let i=toDropIndex-1; i>staticIndex; i--) {
-            tmp2 = layerCopy[i].canvas.style.zIndex;
-
-            if (saveHistory) {
-                new HistoryStateMoveTwoLayers(layerCopy[i], tmp2, tmp);
-            }
-
-            layerCopy[i].canvas.style.zIndex = tmp;
-            tmp = tmp2;
-            nMoved++;
-        }
-
-        if (saveHistory) {
-            new HistoryStateMoveTwoLayers(toDrop, toDrop.canvas.style.zIndex, tmp);
-        }
-
-        toDrop.canvas.style.zIndex = tmp;
-
-        if (saveHistory) {
-            new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
-        }
-
-    }
-}
-
 function getMenuEntryIndex(list, entry) {
     for (let i=0; i<list.length; i++) {
         if (list[i] === entry) {
@@ -692,4 +565,46 @@ function addLayer(id, saveHistory = true) {
     return newLayer;
 }
 
-layerList = document.getElementById("layers-menu");
+function layerDragStart(event) {
+    dragStartLayer = getLayerByID(layerList.children[event.oldIndex].id);
+}
+
+function layerDragDrop(event) {
+    let movedLayer = dragStartLayer;
+    let otherLayer = getLayerByID(layerList.children[event.oldIndex].id);
+
+    let oldIndex = event.oldDraggableIndex;
+    let newIndex = event.newDraggableIndex;
+
+    let movedZIndex = dragStartLayer.canvas.style.zIndex;
+
+    if (oldIndex > newIndex)
+    {
+        for (let i=newIndex; i<oldIndex; i++) {
+            console.log("catena: " + getLayerByID(layerList.children[i].id).canvas.style.zIndex + "->" + getLayerByID(layerList.children[i + 1].id).canvas.style.zIndex);
+            getLayerByID(layerList.children[i].id).canvas.style.zIndex = getLayerByID(layerList.children[i + 1].id).canvas.style.zIndex;
+        }
+    }
+    else
+    {
+        for (let i=newIndex; i>oldIndex; i--) {
+            console.log("catena: " + getLayerByID(layerList.children[i].id).canvas.style.zIndex + "->" + getLayerByID(layerList.children[i - 1].id).canvas.style.zIndex);
+            getLayerByID(layerList.children[i].id).canvas.style.zIndex = getLayerByID(layerList.children[i - 1].id).canvas.style.zIndex;
+        }
+    }
+
+    getLayerByID(layerList.children[oldIndex].id).canvas.style.zIndex = movedZIndex;
+
+    dragging = false;
+}
+
+layerList = document.getElementById("layers-menu");
+
+// Making the layers list sortable
+new Sortable(document.getElementById("layers-menu"), {
+    animation: 100,
+    filter: ".layer-button",
+    draggable: ".layers-menu-entry",
+    onStart: layerDragStart,
+    onEnd: layerDragDrop
+});

views/pixel-editor.hbs

@@ -152,7 +152,7 @@
 
     <!-- LAYER MENU -->
     <ul id = "layers-menu">
-        <li class = "layers-menu-entry selected-layer" draggable = "true">
+        <li class = "layers-menu-entry selected-layer">
             <canvas class = "preview-canvas"></canvas>
             <ul class="layer-buttons">
                 <li class = "layer-button">