Finished todo list for current contribution

Fixed canvas trimming history, added proper setting management for the pixel grid.

_ext/scripts/utilities/getSetValue.js

@@ -2,6 +2,7 @@
 
 function getValue(elementId) {
 	var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
+	console.log("setting: " + elementId + ": " + element.value);
 	return element.value;
 }
 

js/_history.js

@@ -36,10 +36,11 @@ function HistoryStateResizeSprite(xRatio, yRatio, algo, oldData) {
     saveHistoryState(this);
 }
 
-function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) {
+function HistoryStateResizeCanvas(newSize, oldSize, imageDatas, trim) {
     this.oldSize = oldSize;
     this.newSize = newSize;
     this.imageDatas = imageDatas;
+    this.trim = trim;
 
     this.undo = function() {
         let dataIndex = 0;
@@ -58,7 +59,15 @@ function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) {
     };
 
     this.redo = function() {
-        resizeCanvas(null, newSize);
+        console.log("trim: " + this.trim);
+        if (!this.trim) {
+            resizeCanvas(null, newSize);
+            undoStates.push(this);
+        }
+        else {
+            trimCanvas(null, false);
+        }
+
         undoStates.push(this);
     };
 

js/_pixelGrid.js

@@ -28,7 +28,7 @@ function fillPixelGrid() {
     // OPTIMIZABLE, could probably be a bit more elegant
     // Draw horizontal lines
     for (let i=0; i<pixelGridCanvas.width / lineDistance; i++) {
-        context.strokeStyle = pixelGridColor;
+        context.strokeStyle = settings.pixelGridColour;
 
         context.beginPath();
         context.moveTo(i * lineDistance + 0.5, 0);

js/_resizeCanvas.js

@@ -60,14 +60,14 @@ function rcChangedSize(event) {
     borders.bottom = bottom;
 }
 
-function resizeCanvas(event, size, customData) {
+function resizeCanvas(event, size, customData, saveHistory) {
     let imageDatas = [];
     let leftOffset = 0;
     let topOffset = 0;
     let copiedDataIndex = 0;
 
-    // If I'm undoing, I manually put the values in the window
-    if (size != null) {
+    // If I'm undoing and I'm not trimming, I manually put the values in the window
+    if (size != null && customData == null) {
         document.getElementById("rc-width").value = size.x;
         document.getElementById("rc-height").value = size.y;
 
@@ -75,7 +75,7 @@ function resizeCanvas(event, size, customData) {
     }
     
     rcUpdateBorders();
-    console.log("sus");
+
     // Save all imageDatas
     for (let i=0; i<layers.length; i++) {
         if (layers[i].menuEntry != null) {
@@ -84,7 +84,7 @@ function resizeCanvas(event, size, customData) {
     }
 
     // Saving the history only if I'm not already undoing or redoing
-    if (size == undefined) {
+    if (size == undefined && (saveHistory != null && saveHistory)) {
         // Saving history
         new HistoryStateResizeCanvas(
             {x: parseInt(layers[0].canvasSize[0]) + borders.left + borders.right, 
@@ -92,7 +92,7 @@ function resizeCanvas(event, size, customData) {
 
             {x: layers[0].canvasSize[0],
             y: layers[0].canvasSize[1]},
-            imageDatas.slice()
+            imageDatas.slice(), imageDatas != undefined && saveHistory != undefined && saveHistory
         );
     }
 
@@ -174,13 +174,14 @@ function resizeCanvas(event, size, customData) {
     closeDialogue();
 }
 
-function trimCanvas() {
+function trimCanvas(event, saveHistory) {
     let minY = Infinity;
     let minX = Infinity;
     let maxX = -Infinity;
     let maxY = -Infinity;
     let tmp;
     let imageDatas = [];
+    let historySave = saveHistory == null;
 
     rcPivot = "topleft";
     console.log("debug");
@@ -230,7 +231,6 @@ function trimCanvas() {
     // Saving the data
     for (let i=0; i<layers.length; i++) {
         if (layers[i].menuEntry != null) {
-            console.log(`Rect: ${minX} ${maxY}, ${maxX - minX}, ${maxY - minY}`);
             imageDatas.push(layers[i].context.getImageData(minX - 1, layers[i].canvasSize[1] - maxY, maxX-minX + 1, maxY-minY + 1));
         }
     }
@@ -243,7 +243,7 @@ function trimCanvas() {
     document.getElementById("rc-border-top").value = borders.top;
     document.getElementById("rc-border-bottom").value = borders.bottom;
 
-    resizeCanvas(null, null, imageDatas.slice());
+    resizeCanvas(null, null, imageDatas.slice(), historySave);
 }
 
 function rcUpdateBorders() {

js/_settings.js

@@ -14,7 +14,8 @@ if(!settingsFromCookie) {
         enableBrushPreview: true, //unused - performance
         enableEyedropperPreview: true, //unused - performance
         numberOfHistoryStates: 20,
-        maxColorsOnImportedImage: 128
+        maxColorsOnImportedImage: 128,
+        pixelGridColour: '#0000FF'
     };
 }
 else{
@@ -35,6 +36,9 @@ on('click', 'save-settings', function (){
 
     //save new settings to settings object
     settings.numberOfHistoryStates = getValue('setting-numberOfHistoryStates');
+    settings.pixelGridColour = getValue('setting-pixelGridColour');
+    // Filling pixel grid again if colour changed
+    fillPixelGrid();
 
     //save settings object to cookie
     var cookieValue = JSON.stringify(settings);

views/pixel-editor.hbs

@@ -439,10 +439,7 @@
 
                 <h2>Pixel grid</h2>
                 <div class = "settings-entry">
-                    <label for="setting-pixelGridLineDistance">Distance between pixel grid lines</label><input id="setting-pixelGridLineDistance" value="12" autocmplete="off"/>
-                </div>
-                <div class = "settings-entry">
-                    <label for="setting-pixelGridColour">Colour of the pixel grid</label><input id="pixelGridColour" value = "#0000FF" autocomplete="off"/>
+                    <label for="setting-pixelGridColour">Colour of the pixel grid</label><input id="setting-pixelGridColour" value = "#0000FF" autocomplete="off"/>
                 </div>
             </div>