From 01747b2de87ced0a89c0b8e9cdf81fffebc2dfd9 Mon Sep 17 00:00:00 2001
From: Trang <trang@trangla.de>
Date: Mon, 11 May 2026 16:58:16 +0200
Subject: [PATCH] Make the widget runnable as a browser demo.

Dashboard was retired in macOS Catalina, so add a small window.widget
shim (localStorage-backed preferences, window.open for openURL) so the
widget can run from a plain HTTP server.

Replace the hardcoded (8, 31) chrome/titlebar offset in
getCoordsFromEvent with canvas.getBoundingClientRect()-based math.
Without this, clicks land 8px left of where the map-pin hit test
expects, and the 24px hit radius means drags frequently miss. The new
math also divides out any CSS transform: scale() on the body so drags
work under arbitrary scaling.
---
 BART.wdgt/BART.html      | 10 ++++++++++
 BART.wdgt/Script/BART.js |  9 ++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/BART.wdgt/BART.html b/BART.wdgt/BART.html
index a7c7a06..037216c 100644
--- a/BART.wdgt/BART.html
+++ b/BART.wdgt/BART.html
@@ -14,6 +14,16 @@
 
     <!-- JavaScript -->
     
+    <script>
+        window.widget = {
+        preferenceForKey: (k) => localStorage.getItem(k),
+        setPreferenceForKey: (v, k) => localStorage.setItem(k, v ?? ''),
+        openURL: (url) => window.open(url, '_blank'),
+        system: () => ({ outputString: '' }),
+        onshow: null, onhide: null, onremove: null,
+    };
+   </script>
+
     <script type='text/javascript' src='Script/MiscUtils.js' charset='utf-8'></script>
     <script type='text/javascript' src='Script/ArrayUtils.js' charset='utf-8'></script>
     <script type='text/javascript' src='Script/DateUtils.js' charset='utf-8'></script>
diff --git a/BART.wdgt/Script/BART.js b/BART.wdgt/Script/BART.js
index 07386db..92fa4e9 100644
--- a/BART.wdgt/Script/BART.js
+++ b/BART.wdgt/Script/BART.js
@@ -85,9 +85,12 @@ function Bart () {
     // to the trip list are incorrect, but it works because the the trip list only cares
     // about deltas, not absolutes.
     function getCoordsFromEvent (event) {
-        if (!event.clientX || !event.clientY) { return {} }
-        var x = event.clientX - 8;  // canvas left
-        var y = event.clientY - 31; // titlebar height
+        if (event.clientX == null || event.clientY == null) { return {} }
+        var canvas = document.getElementById("bart_map_canvas")
+        var rect = canvas.getBoundingClientRect()
+        var scale = rect.width / canvas.width  // handles CSS transform: scale()
+        var x = (event.clientX - rect.left) / scale
+        var y = (event.clientY - rect.top)  / scale
         return { x:x, y:y }
     }