From 5e2a3e46e169f443044bb6901ecd5d03a9d2ec22 Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Tue, 15 Sep 2020 11:56:05 +0200
Subject: [PATCH] Finished basic canvas resizing

Must test pivots for negative values
---
 css/pixel-editor.scss  |  61 +++++++++++++-------
 js/_resizeCanvas.js    | 125 ++++++++++++++++++++++++++++++++++++++---
 views/pixel-editor.hbs |  59 ++++++++++++-------
 3 files changed, 195 insertions(+), 50 deletions(-)

diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index b0e05d1..557832e 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -959,19 +959,20 @@ svg {
   flex-wrap:wrap;
   vertical-align:middle;
   text-align:center;
-  width:150px;
+  width:130px;
+  float:left;
 
   button {
     margin-right:10px;
     margin-bottom:10px;
     position:relative;
-    width:40px;
-    height:40px;
-    background-color:color(base, background);
-    border:none;
+    width:32px;
+    height:32px;
+    background:$basehover;
+	border:none;
     
     path {
-      fill:color(menu, foreground);
+      fill:$basehovericon;
     }
     transition: background 150ms ease-in-out, 
                 transform 150ms ease;
@@ -980,11 +981,12 @@ svg {
   }
 
   button:hover,
-  button:focus {
+  button:focus,
+  button.rc-selected-pivot {
       cursor:pointer;
-      background-color: color(base, foreground);
+      background-color: $baseicon;
       path {
-        fill:color(base, foreground, bold);
+        fill:$basehovericonhover;
       }
       border: 2px solid color(base, foreground);
   }
@@ -993,13 +995,11 @@ svg {
   }
 }
 
-#borders-menu {
+#borders-menu, #rc-size-menu {
   display:flex;
   position:relative;
   flex-wrap: wrap;
   width:250px;
-  float:right;
-  vertical-align:middle;
   font-size:15px;
   left:10px;
   text-align:center;
@@ -1007,8 +1007,9 @@ svg {
   input {
     position:relative;
     margin-left:10px;
-	height:10px;
-	width:20px;
+	height:15px;
+	width:40px;
+	padding:8px;
   }
 
   input::-webkit-outer-spin-button,
@@ -1021,21 +1022,39 @@ svg {
 	-moz-appearance: textfield;
 	}
 
-  h2 {
-    position:relative;
-    display:inline-block;
-  }
-
   span {
     padding-right:10px;
     float:left;
     position:relative;
-    display: flex;
     vertical-align:middle;
-    height:40px;
+	height:40px;
+	width:100px;
+	display: inline-flex;
+  	align-items: center;
   }
 }
 
+#rc-size-menu {
+	span {
+		width:115px;
+	}
+}
+
+#borders-menu {
+	width:400px;
+	justify-content: center;
+
+	div {
+		float: none;
+		width: 330px;
+		padding-left:50px;
+
+		span {
+			padding-right:20px;
+		}
+	}
+}
+
 #resize-canvas-confirm {
   background: color(button);
   border: none;
diff --git a/js/_resizeCanvas.js b/js/_resizeCanvas.js
index 672cbe1..2e0460c 100644
--- a/js/_resizeCanvas.js
+++ b/js/_resizeCanvas.js
@@ -1,5 +1,6 @@
 let resizeCanvasContainer = document.getElementById("resize-canvas");
 let pivot = "middle";
+let currentPivotObject;
 let resizeCanvasInitialized = false;
 let borders = {left: 0, right: 0, top: 0, bottom: 0};
 
@@ -16,14 +17,61 @@ function initResizeCanvasInputs() {
 
     for (let i=0; i<buttons.length; i++) {
         buttons[i].addEventListener("click", changePivot);
+        if (buttons[i].getAttribute("value").includes("middle")) {
+            currentPivotObject = buttons[i];
+        }
     }
 
+    document.getElementById("rc-width").value = layers[0].canvasSize[0];
+    document.getElementById("rc-height").value = layers[0].canvasSize[1];
+
+    document.getElementById("rc-border-left").addEventListener("change", changedBorder);
+    document.getElementById("rc-border-right").addEventListener("change", changedBorder);
+    document.getElementById("rc-border-top").addEventListener("change", changedBorder);
+    document.getElementById("rc-border-bottom").addEventListener("change", changedBorder);
+
+    document.getElementById("rc-width").addEventListener("change", changedSize);
+    document.getElementById("rc-height").addEventListener("change", changedSize);
+
     document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
+    console.log("Pivot selezionato: " + currentPivotObject);
+}
+
+function changedBorder(event) {
+    rcUpdateBorders();
+    
+    document.getElementById("rc-width").value = parseInt(layers[0].canvasSize[0]) + borders.left + borders.right;
+    document.getElementById("rc-height").value = parseInt(layers[0].canvasSize[1]) + borders.top + borders.bottom;
+}
+
+function changedSize(event) {
+    let widthOffset = document.getElementById("rc-width").value - layers[0].canvasSize[0];
+    let heightOffset = document.getElementById("rc-height").value - layers[0].canvasSize[1];
+
+    let left = Math.round(widthOffset / 2);
+    let right = widthOffset - left;
+    let top = Math.round(heightOffset / 2);
+    let bottom = heightOffset - top;
+
+    document.getElementById("rc-border-left").value = left;
+    document.getElementById("rc-border-right").value = right;
+    document.getElementById("rc-border-top").value = top;
+    document.getElementById("rc-border-bottom").value = bottom;
+
+    borders.left = left;
+    borders.right = right;
+    borders.top = top;
+    borders.bottom = bottom;
 }
 
 function resizeCanvas(event) {
     let imageDatas = [];
+    let leftOffset = 0;
+    let topOffset = 0;
+    let copiedDataIndex = 0;
+
     rcUpdateBorders();
+    changedSize();
 
     // Save all imageDatas
     for (let i=0; i<layers.length; i++) {
@@ -34,21 +82,79 @@ function resizeCanvas(event) {
 
     // Resize the canvases
     for (let i=0; i<layers.length; i++) {
-        layers[i].canvasSize[0] += borders.left + borders.right;
-        layers[i].canvasSize[1] += borders.top + borders.bottom;
+        layers[i].canvasSize[0] = parseInt(layers[i].canvasSize[0]) + borders.left + borders.right;
+        layers[i].canvasSize[1] = parseInt(layers[i].canvasSize[1]) + borders.top + borders.bottom;
 
         layers[i].canvas.width = layers[i].canvasSize[0];
         layers[i].canvas.height = layers[i].canvasSize[1];
+
+        layers[i].resize();
+        layers[i].context.fillStyle = currentGlobalColor;
     }
-    // Clear the canvases
+
+    // Regenerate the checkerboard
+    fillCheckerboard();
 
     // Put the imageDatas in the right position
-    // Must crop the imageDatas if the canvas has being reduced
+    switch (pivot)
+    {
+        case 'topleft':
+            leftOffset = 0;
+            topOffset = 0;
+            break;
+        case 'top':
+            leftOffset = (borders.left + borders.right) / 2;
+            topOffset = 0;
+            break;
+        case 'topright':
+            leftOffset = borders.left + borders.right;
+            topOffset = 0;
+            break;
+        case 'left':
+            leftOffset = 0;
+            topOffset = (borders.top + borders.bottom) / 2;
+            break;
+        case 'middle':
+            leftOffset = (borders.left + borders.right) / 2;
+            topOffset = (borders.top + borders.bottom) / 2;
+            break;
+        case 'right':
+            leftOffset = borders.left + borders.right;
+            topOffset = (borders.top + borders.bottom) / 2;
+            break;
+        case 'bottomleft':
+            leftOffset = 0;
+            topOffset = borders.top + borders.bottom;
+            break;
+        case 'bottom':
+            leftOffset = (borders.left + borders.right) / 2;
+            topOffset = borders.top + borders.bottom;
+            break;
+        case 'bottomright':
+            leftOffset = borders.left + borders.right;
+            topOffset = borders.top + borders.bottom;
+            break;
+        default:
+            console.log('now thats a very weird pivot');
+            break;
+    }
+
+    /*
+    leftOffset = Math.abs(leftOffset);
+    topOffset = Math.abs(topOffset);
+    */
+   
+    for (let i=0; i<layers.length; i++) {
+        if (layers[i].menuEntry != null) {
+            layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
+            copiedDataIndex++;
+        }
+    }
+
+    closeDialogue();
 }
 
 function rcUpdateBorders() {
-    console.log(document.getElementById("rc-border-left").value);
-
     // Getting input
     borders.left = document.getElementById("rc-border-left").value;
     borders.right = document.getElementById("rc-border-right").value;
@@ -60,11 +166,14 @@ function rcUpdateBorders() {
     borders.right == "" ? borders.right = 0 : borders.right = Math.round(parseInt(borders.right));
     borders.top == "" ? borders.top = 0 : borders.top = Math.round(parseInt(borders.top));
     borders.bottom == "" ? borders.bottom = 0 : borders.bottom = Math.round(parseInt(borders.bottom));
-
-    console.log(borders);
 }
 
 function changePivot(event) {
     pivot = event.target.getAttribute("value");
+
+    // Setting the selected class
+    currentPivotObject.classList.remove("rc-selected-pivot");
+    currentPivotObject = event.target;
+    currentPivotObject.classList.add("rc-selected-pivot");
 }
 
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index d36b041..d708c33 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -260,34 +260,51 @@
                 <button class="pivot-button" value="top">{{svg "arrows/top.svg" width="20" height="20"}}</button>
                 <button class="pivot-button" value="topright">{{svg "arrows/topright.svg" width="20" height="20"}}</button>
                 <button class="pivot-button" value="left">{{svg "arrows/left.svg" width="20" height="20"}}</button>
-                <button class="pivot-button" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
+                <button class="pivot-button rc-selected-pivot" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
                 <button class="pivot-button" value="right">{{svg "arrows/right.svg" width="20" height="20"}}</button>
                 <button class="pivot-button" value="bottomleft">{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
                 <button class="pivot-button" value="bottom">{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
                 <button class="pivot-button" value="bottomright">{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
             </span>
+            <!-- SIZE-->
+            <span id = "rc-size-menu">
+                <h2>Size</h2>
+                <div>
+                    <span>
+                        Width: <input id="rc-width" type="number" default="0" step="1" 
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    </span>
+                    
+                    <span>
+                        Height: <input id="rc-height" default="0" step="1" type="number" 
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    </span>
+                </div>
+            </span>        
             <!--BORDERS-->
             <span id = "borders-menu">
-                <span>
-                    Left: <input id="rc-border-left" type="number" default="0" step="1" 
-                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
-                </span>
-                
-                <span>
-                    Right: <input id="rc-border-right" type="number" default="0" step="1" 
-                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
-                </span>
-                
-                <span>
-                    Top: <input id="rc-border-top" type="number" default="0" step="1" 
-                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
-                </span>
-                
-                <span>
-                    Bottom: <input id="rc-border-bottom" default="0" step="1" type="number" 
-                    value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
-                </span>
-
+                <h2>Borders offsets</h2>
+                <div>
+                    <span>
+                        Left: <input id="rc-border-left" type="number" default="0" step="1" 
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    </span>
+                    
+                    <span>
+                        Right: <input id="rc-border-right" type="number" default="0" step="1" 
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    </span>
+                    
+                    <span>
+                        Top: <input id="rc-border-top" type="number" default="0" step="1" 
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    </span>
+                    
+                    <span>
+                        Bottom: <input id="rc-border-bottom" default="0" step="1" type="number" 
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                    </span>
+                </div>
                 <button id = "resize-canvas-confirm">Resize canvas</button>
             </span>            
         </div>