From a5e915fe0dbd40db542f5f5c6312fd66e11951a3 Mon Sep 17 00:00:00 2001
From: Neil Graham <lerc@screamingduck.com>
Date: Sat, 25 Nov 2023 20:35:02 +1300
Subject: [PATCH] Rudimentary create new image support.

---
 web/page/bspaint.js | 44 ++++++++++++++++++++++++++++++++-
 web/page/index.html | 22 +++++++++++++++++
 web/page/style.css  | 60 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 125 insertions(+), 1 deletion(-)

diff --git a/web/page/bspaint.js b/web/page/bspaint.js
index 7996684..6bd0586 100644
--- a/web/page/bspaint.js
+++ b/web/page/bspaint.js
@@ -567,6 +567,45 @@ function initPaint(){
   updateMirrorGridButtonImage();
   updateMirrorRotationButtonImage();
 
+  $("#newImageBtn").on("click", function() {
+    console.log("click #newImageBtn")
+    $("#newImageModal").addClass("modal-active");
+  });
+  
+  $(".close-button").on("click", function() {
+    $(".modal-active").removeClass("modal-active");
+  });
+  
+  $(".cancel-button").on("click", function() {
+    $(".modal-active").removeClass("modal-active");
+  });
+
+  $(".create-button").on("click", function() {
+    const width = $("#imageWidth").val();
+    const height = $("#imageHeight").val();
+    $(".modal-active").removeClass("modal-active");
+    let area=createDrawArea(blankCanvas(width, height))
+    $("#workspace").append(area.element);
+  });
+  
+  $(window).on("click", function(event) {
+    if ($(event.target).hasClass("modal")) {
+      $(".modal-active").removeClass("modal-active");
+    }
+  });
+  
+  $("#newImageForm").on("submit", function(event) {
+    event.preventDefault();
+  });
+  
+  $(window).on("keydown", function(event) {
+    if (event.key === "Escape" && $(".modal-active").length) {
+      $(".modal-active").removeClass("modal-active");
+    }
+  });
+  
+
+
   window.test1=createDrawArea();
   window.test2=createDrawArea();
 
@@ -1305,7 +1344,10 @@ function fillOrClear(from) {
     activePic?.fillLayer(from.val());
   }   
 }
- 
+
+
+
+
 
 hotkeys["CTRL_Z"] = _=>{activePic?.undo()}
 hotkeys["CTRL_SHIFT_Z"] = _=>{activePic?.redo()}
diff --git a/web/page/index.html b/web/page/index.html
index 70a2eb8..cd45c42 100644
--- a/web/page/index.html
+++ b/web/page/index.html
@@ -31,6 +31,8 @@
         <div id="clear" class="action button" ></div>
         <div id="undo" class="action button" ></div>
         <div id="redo" class="action button" ></div>
+        <button id="newImageBtn">New Image</button>
+
       </div>
     </div>
     <div id="palette" class="noselect">
@@ -50,6 +52,26 @@
     </div>
   </div>
   
+
+  <div id="newImageModal" class="modal">
+    <div class="modal-content">
+      <span class="close-button">&times;</span>
+      <h2>Create New Image</h2>
+      <div>
+        <label for="imageWidth">Width:</label>
+        <input type="number" id="imageWidth" name="imageWidth" min="1" value="512">
+  
+        <label for="imageHeight">Height:</label>
+        <input type="number" id="imageHeight" name="imageHeight" min="1" value="512">
+  
+      </div>
+      <div>
+        <button class="create-button">Create</button>
+        <button class="cancel-button">Cancel</button>
+      </div>
+    </div>
+  </div>
+
   <script src="main.js"></script>
 </body>
 </html>
diff --git a/web/page/style.css b/web/page/style.css
index 1ba76c3..e9c833f 100644
--- a/web/page/style.css
+++ b/web/page/style.css
@@ -113,6 +113,7 @@ svg.tool.button {
 .subpanel.actions {
   position:absolute;
   right:0.5em;
+  width:200px;
 }
 .subpanel input {
   display:block;
@@ -547,3 +548,62 @@ input.maskColor {
   width: 100%;
   text-align: center;
 }
+
+.modal {
+  z-index:5000;
+  display: none; 
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+
+}
+
+.modal h2 {
+  margin-top: 10px;
+}
+.modal-active {
+  display:block;
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  padding-bottom:60px;
+  border: 1px solid #888;
+  width: 300px;
+  position:relative; 
+  text-align:center;
+
+}
+
+.close-button {
+  color: #aaa;
+  position:absolute;
+  right:10px;
+  top:10px;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+#newImageModal .cancel-button {
+  position: absolute;
+  left:10px;
+  bottom:10px;
+}
+#newImageModal .create-button {
+  position: absolute;
+  right:10px;
+  bottom:10px;
+}