diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index df2b94075..7cce43ecd 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 TouchBar, { TouchBarLabel } from "../../react/TouchBar"; +import TouchBar, { TouchBarLabel, TouchBarSlider } from "../../react/TouchBar"; const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659]; const DEFAULT_ZOOM = 2; @@ -48,8 +48,6 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM }, 5000); const [ currentZoom, setCurrentZoom ] = useState(); - console.log("Got new notes IDs ", noteIds); - console.log("Got notes ", notes); useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]); // Note creation. @@ -133,7 +131,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM > {notes.map(note => )} - + ); } @@ -247,10 +245,16 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not }); } -function GeoMapTouchBar({ zoom }: { zoom: number | undefined }) { - return ( +function GeoMapTouchBar({ zoom, map }: { zoom: number | undefined, map: L.Map | null | undefined }) { + return map && ( - + map.setZoom(newValue)} + /> ) } diff --git a/apps/client/src/widgets/react/TouchBar.tsx b/apps/client/src/widgets/react/TouchBar.tsx index 2ed5ee1c9..d0a7b9d65 100644 --- a/apps/client/src/widgets/react/TouchBar.tsx +++ b/apps/client/src/widgets/react/TouchBar.tsx @@ -73,3 +73,26 @@ export function TouchBarLabel({ label }: { label: string }) { return <>; } + +interface SliderProps { + label: string; + value: number; + minValue: number; + maxValue: number; + onChange: (newValue: number) => void; +} + +export function TouchBarSlider({ label, value, minValue, maxValue, onChange }: SliderProps) { + const api = useContext(TouchBarContext); + + if (api) { + const item = new api.TouchBar.TouchBarSlider({ + label, + value, minValue, maxValue, + change: onChange + }); + api.addItem(item); + } + + return <>; +}