gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 20:19:05 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

chore(react/touchbar): add slider

Browse Source
This commit is contained in:
Elian Doran 2025-09-06 14:18:32 +03:00
parent 785f72ecd6
commit 3e7f0ad0a8
No known key found for this signature in database
2 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/client/src/widgets/collections/geomap/index.tsx
View File

@ -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<number>();
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 => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
</Map>
<GeoMapTouchBar zoom={currentZoom} />
<GeoMapTouchBar zoom={currentZoom} map={apiRef.current} />
</div>
);
}
@ -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 && (
<TouchBar>
<TouchBarLabel label={String(zoom)} />
<TouchBarSlider
label="Zoom"
value={zoom ?? map.getZoom()}
minValue={map.getMinZoom()}
maxValue={map.getMaxZoom()}
onChange={(newValue) => map.setZoom(newValue)}
/>
</TouchBar>
)
}

23
apps/client/src/widgets/react/TouchBar.tsx
View File

@ -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 <></>;
}