From 785f72ecd63f8d974c87638c518d42eda824f1d0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 6 Sep 2025 14:08:00 +0300 Subject: [PATCH] chore(react/touchbar): react to updates --- .../widgets/collections/calendar/index.tsx | 8 +++- .../src/widgets/collections/geomap/index.tsx | 40 ++++++------------- apps/client/src/widgets/react/TouchBar.tsx | 22 ++++++++-- 3 files changed, 37 insertions(+), 33 deletions(-) diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx index 208bf17c6..fc5a0c1da 100644 --- a/apps/client/src/widgets/collections/calendar/index.tsx +++ b/apps/client/src/widgets/collections/calendar/index.tsx @@ -3,7 +3,7 @@ import { ViewModeProps } from "../interface"; import Calendar from "./calendar"; import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"; import "./index.css"; -import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks"; +import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTouchBar, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks"; import { LOCALE_IDS } from "@triliumnext/commons"; import { Calendar as FullCalendar } from "@fullcalendar/core"; import { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils"; @@ -304,3 +304,9 @@ function useEventDisplayCustomization() { }, []); return { eventDidMount }; } + +function useTouchBarCustomization(api: FullCalendar) { + useTouchBar(() => { + + }, [ api ]); +} diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index 43dbc4a7f..df2b94075 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -17,7 +17,7 @@ import toast from "../../../services/toast"; import { t } from "../../../services/i18n"; import server from "../../../services/server"; import branches from "../../../services/branches"; -import { hasTouchBar } from "../../../services/utils"; +import TouchBar, { TouchBarLabel } from "../../react/TouchBar"; const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659]; const DEFAULT_ZOOM = 2; @@ -46,6 +46,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM saveConfig(viewConfig); } }, 5000); + const [ currentZoom, setCurrentZoom ] = useState(); console.log("Got new notes IDs ", noteIds); console.log("Got notes ", notes); @@ -113,32 +114,6 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM } }); - // Touch bar. - const [ zoomLevel, setZoomLevel ] = useState(); - const onZoom = useCallback(() => { - if (!apiRef.current) return; - setZoomLevel(apiRef.current.getZoom()); - }, []); - useTouchBar(({ TouchBar, parentComponent }) => { - const map = apiRef.current; - if (!note || !map) return; - - return [ - new TouchBar.TouchBarSlider({ - label: "Zoom", - value: zoomLevel ?? map.getZoom(), - minValue: map.getMinZoom(), - maxValue: map.getMaxZoom(), - change: (newValue) => map.setZoom(newValue) - }), - new TouchBar.TouchBarButton({ - label: "New geo note", - click: () => parentComponent?.triggerCommand("geoMapCreateChildNote"), - enabled: (state === State.Normal) - }) - ]; - }, [ zoomLevel, state ]); - return (
setCurrentZoom(apiRef.current?.getZoom())} scale={hasScale} > {notes.map(note => )} +
); } @@ -270,3 +246,11 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not iconAnchor: [12, 41] }); } + +function GeoMapTouchBar({ zoom }: { zoom: number | undefined }) { + return ( + + + + ) +} diff --git a/apps/client/src/widgets/react/TouchBar.tsx b/apps/client/src/widgets/react/TouchBar.tsx index 806c2da13..2ed5ee1c9 100644 --- a/apps/client/src/widgets/react/TouchBar.tsx +++ b/apps/client/src/widgets/react/TouchBar.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect } from "preact/hooks"; +import { useContext, useEffect, useState } from "preact/hooks"; import { ParentComponent } from "./react_utils"; import { ComponentChildren, createContext } from "preact"; import { TouchBarItem } from "../../components/touch_bar"; @@ -16,6 +16,7 @@ interface TouchBarContextApi { const TouchBarContext = createContext(null); export default function TouchBar({ children }: TouchBarProps) { + const [ isFocused, setIsFocused ] = useState(false); const parentComponent = useContext(ParentComponent); const remote = dynamicRequire("@electron/remote") as typeof import("@electron/remote"); const items: TouchBarItem[] = []; @@ -32,13 +33,27 @@ export default function TouchBar({ children }: TouchBarProps) { if (!el) return; function onFocusGained() { - remote.getCurrentWindow().setTouchBar(new remote.TouchBar({ items })); + setIsFocused(true); + } + + function onFocusLost() { + setIsFocused(false); } el.addEventListener("focusin", onFocusGained); - return () => el.removeEventListener("focusin", onFocusGained); + el.addEventListener("focusout", onFocusLost); + return () => { + el.removeEventListener("focusin", onFocusGained); + el.removeEventListener("focusout", onFocusLost); + } }, []); + useEffect(() => { + if (isFocused) { + remote.getCurrentWindow().setTouchBar(new remote.TouchBar({ items })); + } + }); + return ( {children} @@ -48,7 +63,6 @@ export default function TouchBar({ children }: TouchBarProps) { export function TouchBarLabel({ label }: { label: string }) { const api = useContext(TouchBarContext); - console.log("Build label with API ", api); if (api) { const item = new api.TouchBar.TouchBarLabel({