From 8056f879370bf08885eadf4e3350006263a5b05a Mon Sep 17 00:00:00 2001
From: Mnem42 <177770058+Mnem42@users.noreply.github.com>
Date: Thu, 18 Dec 2025 21:07:03 +0000
Subject: [PATCH] Update

---
 mods/zoom.js | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/mods/zoom.js b/mods/zoom.js
index af44a3eb..55899e2a 100644
--- a/mods/zoom.js
+++ b/mods/zoom.js
@@ -7,10 +7,25 @@ const zoom_levels = [
     12
 ]
 window.zoom_data_div = null
-
 window.zoom_level = 1
 window.zoom_panning = [0,0]
 
+let colour_setting;
+
+dependOn("betterSettings.js", () => {
+    const settings_tab = new SettingsTab("zoom.js");
+    colour_setting = new Setting(
+        "Canvas background", 
+        "canvas_bkg", 
+        settingType.COLOR, 
+        false, 
+        defaultValue="#252525"
+    );
+
+    settings_tab.registerSettings(undefined, colour_setting)
+    settingsManager.registerTab(settings_tab)
+})
+
 function handle_zoom(direction){
     switch (direction){
         case "in":
@@ -73,8 +88,7 @@ function gen_button(row, col, html, click, nopos, id){
 function add_css(){
     const CSS = `
     #zm_data_div { margin-bottom: 10px }
-    #canvasDiv   { overflow: hidden }
-    #game        { border: solid white }
+    #canvasDiv   { overflow: hidden; background-color: var(--opac-85) }
 
     @media(pointer=coarse){
         #zm_floater_container#zm_floater_container { 
@@ -189,6 +203,7 @@ function add_zoom_floaters(){
     )
 
     const canvas_div = document.getElementById("canvasDiv")
+    canvas_div.style.backgroundColor = colour_setting?.value ?? "#252525"
     canvas_div.appendChild(container)
 }
 
@@ -199,17 +214,7 @@ function rescale(){
     const x = zoom_panning[0] * (pixelSize * scale)
     const y = zoom_panning[1] * (pixelSize * scale)
 
-    gameCanvas.style.transform = `translate(${x}px,${y}px) scale(${scale})`
-    
-    const width = 2 / scale
-    gameCanvas.style.borderTopWidth = 
-        `${zoom_panning[1] > 0 ? width : 0}px`
-    gameCanvas.style.borderBottomWidth = 
-        `${zoom_panning[1] < 0 ? width : 0}px`
-    gameCanvas.style.borderLeftWidth = 
-        `${zoom_panning[0] > 0 ? width : 0}px`
-    gameCanvas.style.borderRightWidth = 
-        `${zoom_panning[0] < 0 ? width : 0}px`
+    gameCanvas.style.transform = `translate(${x}px, ${y}px) translateX(-50%) scale(${scale})`
 }
 
 function log_info(){