gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix(collection/presentation): overview active detection not working

Browse Source
This commit is contained in:
Elian Doran 2025-10-16 08:41:06 +03:00
parent 6ba729fd52
commit c2d2ecc1d5
No known key found for this signature in database
1 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/client/src/widgets/collections/presentation/index.tsx
View File

@ -22,7 +22,7 @@ const stylesheets = [
export default function PresentationView({ note, noteIds }: ViewModeProps<{}>) { export default function PresentationView({ note, noteIds }: ViewModeProps<{}>) {
const [ presentation, setPresentation ] = useState<PresentationModel>(); const [ presentation, setPresentation ] = useState<PresentationModel>();
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useRef<Reveal.Api>(null); const [ api, setApi ] = useState<Reveal.Api>();
function refresh() { function refresh() {
buildPresentationModel(note).then(setPresentation); buildPresentationModel(note).then(setPresentation);
@ -44,17 +44,16 @@ export default function PresentationView({ note, noteIds }: ViewModeProps<{}>) {
containerRef={containerRef} containerRef={containerRef}
> >
{stylesheets.map(stylesheet => <style>{stylesheet}</style>)} {stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
<Presentation presentation={presentation} apiRef={apiRef} /> <Presentation presentation={presentation} setApi={setApi} />
</ShadowDom> </ShadowDom>
<ButtonOverlay containerRef={containerRef} apiRef={apiRef} /> <ButtonOverlay containerRef={containerRef} api={api} />
</> </>
) )
} }
function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLDivElement>, apiRef: RefObject<Reveal.Api> }) { function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: Reveal.Api | undefined }) {
const [ isOverviewActive, setIsOverviewActive ] = useState(false); const [ isOverviewActive, setIsOverviewActive ] = useState(false);
useEffect(() => { useEffect(() => {
const api = apiRef.current;
if (!api) return; if (!api) return;
setIsOverviewActive(api.isOverview()); setIsOverviewActive(api.isOverview());
const onEnabled = () => setIsOverviewActive(true); const onEnabled = () => setIsOverviewActive(true);
@ -65,9 +64,7 @@ function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLD
api.off("overviewshown", onEnabled); api.off("overviewshown", onEnabled);
api.off("overviewhidden", onDisabled); api.off("overviewhidden", onDisabled);
}; };
}, [ apiRef ]); }, [ api ]);
console.log("Active ", isOverviewActive);
return ( return (
<div className="presentation-button-bar"> <div className="presentation-button-bar">
@ -75,7 +72,7 @@ function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLD
icon="bx bx-edit" icon="bx bx-edit"
text={t("presentation_view.edit-slide")} text={t("presentation_view.edit-slide")}
onClick={e => { onClick={e => {
const currentSlide = apiRef.current?.getCurrentSlide(); const currentSlide = api?.getCurrentSlide();
const noteId = getNoteIdFromSlide(currentSlide); const noteId = getNoteIdFromSlide(currentSlide);
if (noteId) { if (noteId) {
@ -89,7 +86,7 @@ function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLD
text={t("presentation_view.slide-overview")} text={t("presentation_view.slide-overview")}
active={isOverviewActive} active={isOverviewActive}
onClick={() => { onClick={() => {
apiRef.current?.toggleOverview(); api?.toggleOverview();
}} }}
/> />
@ -102,7 +99,7 @@ function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLD
) )
} }
function Presentation({ presentation, apiRef: externalApiRef } : { presentation: PresentationModel, apiRef: RefObject<Reveal.Api> }) { function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: Reveal.Api) => void }) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useRef<Reveal.Api>(null); const apiRef = useRef<Reveal.Api>(null);
const isFirstRenderRef = useRef(true); const isFirstRenderRef = useRef(true);
@ -124,7 +121,7 @@ function Presentation({ presentation, apiRef: externalApiRef } : { presentation:
}); });
api.initialize().then(() => { api.initialize().then(() => {
apiRef.current = api; apiRef.current = api;
externalApiRef.current = api; setApi(api);
}); });
return () => { return () => {