feat(touch_bar): update zoom slider value

src/public/app/components/app_context.ts

@@ -260,6 +260,7 @@ export type CommandMappings = {
         TouchBar: typeof import("electron").TouchBar;
         buildIcon(name: string): NativeImage;
     };
+    refreshTouchBar: CommandData;
 };
 
 type EventMappings = {

src/public/app/widgets/geo_map.ts

@@ -53,6 +53,8 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
                 this.initCallback(L);
             }
 
+            map.addEventListener("zoom", () => this.triggerCommand("refreshTouchBar"));
+
             L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
                 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                 detectRetina: true
@@ -69,6 +71,7 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
         return [
             new TouchBar.TouchBarSlider({
                 label: "Zoom",
+                value: map.getZoom(),
                 minValue: map.getMinZoom(),
                 maxValue: map.getMaxZoom(),
                 change(newValue) {

src/public/app/widgets/touch_bar.ts

@@ -8,6 +8,7 @@ export default class TouchBarWidget extends NoteContextAwareWidget {
 
     nativeImage: typeof import("electron").nativeImage;
     remote: typeof import("@electron/remote");
+    lastFocusedComponent?: Component;
 
     constructor() {
         super();
@@ -19,19 +20,8 @@ export default class TouchBarWidget extends NoteContextAwareWidget {
             const target = e.target;
             const parentComponentEl = $(target).closest(".component");
             // TODO: Remove typecast once it's no longer necessary.
-            const parentComponent = appContext.getComponentByEl(parentComponentEl[0]) as Component;
+            this.lastFocusedComponent = appContext.getComponentByEl(parentComponentEl[0]) as Component;
-            const { TouchBar } = this.remote;
+            this.#refreshTouchBar();
-            if (!parentComponent) {
-                return;
-            }
-
-            let result = parentComponent.triggerCommand("buildTouchBar", {
-                TouchBar,
-                buildIcon: this.buildIcon.bind(this)
-            });
-
-            const touchBar = this.#buildTouchBar(result);
-            this.remote.getCurrentWindow().setTouchBar(touchBar);
         });
     }
 
@@ -54,6 +44,22 @@ export default class TouchBarWidget extends NoteContextAwareWidget {
         return newImage;
     }
 
+    #refreshTouchBar() {
+        const { TouchBar } = this.remote;
+        const parentComponent = this.lastFocusedComponent;
+        if (!parentComponent) {
+            return;
+        }
+
+        let result = parentComponent.triggerCommand("buildTouchBar", {
+            TouchBar,
+            buildIcon: this.buildIcon.bind(this)
+        });
+
+        const touchBar = this.#buildTouchBar(result);
+        this.remote.getCurrentWindow().setTouchBar(touchBar);
+    }
+
     #buildTouchBar(componentSpecificItems?: (TouchBarButton | TouchBarSpacer | TouchBarGroup | TouchBarSegmentedControl)[]) {
         const { TouchBar } = this.remote;
         const { TouchBarButton, TouchBarSpacer, TouchBarGroup, TouchBarSegmentedControl, TouchBarOtherItemsProxy } = this.remote.TouchBar;
@@ -84,4 +90,8 @@ export default class TouchBarWidget extends NoteContextAwareWidget {
         });
     }
 
+    refreshTouchBarEvent() {
+        this.#refreshTouchBar();
+    }
+
 }