Started resize canvas interface

js/_resizeCanvas.js

@@ -0,0 +1,29 @@
+let resizeCanvasContainer = document.getElementById("resize-canvas");
+
+function openResizeCanvasWindow() {
+    showDialogue('resize-canvas');
+}
+
+// Use a dialogue
+    // Let the user specify data
+        // Borders
+        // Pivot
+    // Apply the new sizing
+    // Move the images on the layers to fit what the user actually decided
+
+// Function to handle dropdown menu for pivots
+    // Open when clicking on the button
+    // Save the chosen pivot
+    // Close the menu
+
+// Function to retrieve data from the input field
+    // Store the data in the form into variables
+    // Call the function to resize the canvases
+
+// Function to actually resize the canvases
+    // Save all imageDatas
+    // Resize the canvases
+    // Clear the canvases
+
+// Function to place the imageDatas as specified in the pivot section
+    // Put the imageDatas in the right position

js/pixel-editor.js

@@ -44,6 +44,7 @@
 //=include _checkerboard.js
 //=include _layer.js
 //=include _copyPaste.js
+//=include _resizeCanvas.js
 
 /**load file**/
 //=include _loadImage.js

views/pixel-editor.hbs

@@ -52,6 +52,8 @@
         <li>
             <button>Edit</button>
             <ul>
+                <li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
+                <li><button id="resize-sprite-button">Resize sprite</button></li>
                 <li><button id="undo-button" class="disabled">Undo</button></li>
                 <li><button id="redo-button" class="disabled">Redo</button></li>
             </ul>
@@ -218,7 +220,8 @@
       {{svg "adjust.svg" width="20" height="20" }}
     </div>
 
-    <div id="pop-up-container">
+    <div id="pop-up-container" id = "new-pixel-container">
+        <!-- NEW PIXEL -->
         <div id="new-pixel">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
             <h1>New Pixel</h1>
@@ -246,6 +249,34 @@
                 <button id="create-button" class="default">Create</button>
             </div>
         </div>
+        <!--CANVAS RESIZE-->
+        <div id = "resize-canvas">
+            <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
+            <h1>Resize canvas</h1>
+
+            <!--PIVOT-->
+            <h2>Choose pivot:</h2>
+            <button id = "open-pivot-button" class = "dropdown-button">Choose a pivot...</button>
+            <div id = "pivot-menu" class = "dropdown-menu">
+                <button>Top-left</button>
+                <button>Top-center</button>
+                <button>Top-right</button>
+                <button>Middle-left</button>
+                <button>Middle-center</button>
+                <button>Middle-right</button>
+                <button>Bottom-left</button>
+                <button>Bottom-center</button>
+                <button>Bottom-right</button>
+            </div>
+            <input id="pivot" value="{{#if pivot}}{{pivot}}{{else}}'Center'{{/if}}" autocomplete="off" />
+
+            <!--BORDERS-->
+            <h2>Borders</h2>
+            Left: <input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+            Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+            Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+            Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+        </div>
         <div id="help">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
             <h1>Help</h1>