mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-06-01 07:38:33 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add slide mode with reveal.js

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-10-04 12:50:39 +02:00
parent 29565f8f89
commit 36e445e631
70 changed files with 1225 additions and 323 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/editor-page/synced-scroll/hooks/use-on-user-scroll.ts
View file

@ -1,52 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { RefObject, useCallback } from 'react'
import { LineMarkerPosition } from '../../../markdown-renderer/types'
import { ScrollState } from '../scroll-props'
export const useOnUserScroll = (
lineMarks: LineMarkerPosition[] | undefined,
scrollContainer: RefObject<HTMLElement>,
onScroll: ((newScrollState: ScrollState) => void) | undefined
): (() => void) => {
return useCallback(() => {
if (!scrollContainer.current || !lineMarks || lineMarks.length === 0 || !onScroll) {
return
}
const scrollTop = scrollContainer.current.scrollTop
const lineMarksBeforeScrollTop = lineMarks.filter((lineMark) => lineMark.position <= scrollTop)
if (lineMarksBeforeScrollTop.length === 0) {
return
}
const lineMarksAfterScrollTop = lineMarks.filter((lineMark) => lineMark.position > scrollTop)
if (lineMarksAfterScrollTop.length === 0) {
return
}
const beforeLineMark = lineMarksBeforeScrollTop.reduce((prevLineMark, currentLineMark) =>
prevLineMark.line >= currentLineMark.line ? prevLineMark : currentLineMark
)
const afterLineMark = lineMarksAfterScrollTop.reduce((prevLineMark, currentLineMark) =>
prevLineMark.line < currentLineMark.line ? prevLineMark : currentLineMark
)
const componentHeight = afterLineMark.position - beforeLineMark.position
const distanceToBefore = scrollTop - beforeLineMark.position
const percentageRaw = distanceToBefore / componentHeight
const lineCount = afterLineMark.line - beforeLineMark.line
const line = Math.floor(lineCount * percentageRaw + beforeLineMark.line)
const lineHeight = componentHeight / lineCount
const innerScrolling = Math.floor(((distanceToBefore % lineHeight) / lineHeight) * 100)
const newScrollState: ScrollState = { firstLineInView: line, scrolledPercentage: innerScrolling }
onScroll(newScrollState)
}, [lineMarks, onScroll, scrollContainer])
}

60
src/components/editor-page/synced-scroll/hooks/use-scroll-to-line-mark.ts
View file

@ -1,60 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { RefObject, useCallback, useEffect, useRef } from 'react'
import { LineMarkerPosition } from '../../../markdown-renderer/types'
import { ScrollState } from '../scroll-props'
import { findLineMarks } from '../utils'
export const useScrollToLineMark = (
scrollState: ScrollState | undefined,
lineMarks: LineMarkerPosition[] | undefined,
contentLineCount: number,
scrollContainer: RefObject<HTMLElement>
): void => {
const lastScrollPosition = useRef<number>()
const scrollTo = useCallback(
(targetPosition: number): void => {
if (!scrollContainer.current || targetPosition === lastScrollPosition.current) {
return
}
lastScrollPosition.current = targetPosition
scrollContainer.current.scrollTo({
top: targetPosition
})
},
[scrollContainer]
)
useEffect(() => {
if (!scrollContainer.current || !lineMarks || lineMarks.length === 0 || !scrollState) {
return
}
if (scrollState.firstLineInView < lineMarks[0].line) {
scrollTo(0)
return
}
if (scrollState.firstLineInView > lineMarks[lineMarks.length - 1].line) {
scrollTo(scrollContainer.current.offsetHeight)
return
}
const { lastMarkBefore, firstMarkAfter } = findLineMarks(lineMarks, scrollState.firstLineInView)
const positionBefore = lastMarkBefore ? lastMarkBefore.position : lineMarks[0].position
const positionAfter = firstMarkAfter ? firstMarkAfter.position : scrollContainer.current.offsetHeight
const lastMarkBeforeLine = lastMarkBefore ? lastMarkBefore.line : 1
const firstMarkAfterLine = firstMarkAfter ? firstMarkAfter.line : contentLineCount
const linesBetweenMarkers = firstMarkAfterLine - lastMarkBeforeLine
const blockHeight = positionAfter - positionBefore
const lineHeight = blockHeight / linesBetweenMarkers
const position =
positionBefore +
(scrollState.firstLineInView - lastMarkBeforeLine) * lineHeight +
(scrollState.scrolledPercentage / 100) * lineHeight
const correctedPosition = Math.floor(position)
scrollTo(correctedPosition)
}, [contentLineCount, lineMarks, scrollContainer, scrollState, scrollTo])
}

43
src/components/editor-page/synced-scroll/hooks/use-synced-scrolling.ts
View file

@ -1,43 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback, useState } from 'react'
import { LineMarkerPosition } from '../../../markdown-renderer/types'
import { ScrollState } from '../scroll-props'
import { useOnUserScroll } from './use-on-user-scroll'
import { useScrollToLineMark } from './use-scroll-to-line-mark'
export const useSyncedScrolling = (
outerContainerRef: React.RefObject<HTMLElement>,
rendererRef: React.RefObject<HTMLElement>,
numberOfLines: number,
scrollState?: ScrollState,
onScroll?: (scrollState: ScrollState) => void
): [(lineMarkers: LineMarkerPosition[]) => void, () => void] => {
const [lineMarks, setLineMarks] = useState<LineMarkerPosition[]>()
const onLineMarkerPositionChanged = useCallback(
(linkMarkerPositions: LineMarkerPosition[]) => {
if (!outerContainerRef.current || !rendererRef.current) {
return
}
const documentRenderPaneTop = outerContainerRef.current.offsetTop ?? 0
const rendererTop = rendererRef.current.offsetTop ?? 0
const offset = rendererTop - documentRenderPaneTop
const adjustedLineMakerPositions = linkMarkerPositions.map((oldMarker) => ({
line: oldMarker.line,
position: oldMarker.position + offset
}))
setLineMarks(adjustedLineMakerPositions)
},
[outerContainerRef, rendererRef]
)
const onUserScroll = useOnUserScroll(lineMarks, outerContainerRef, onScroll)
useScrollToLineMark(scrollState, lineMarks, numberOfLines, outerContainerRef)
return [onLineMarkerPositionChanged, onUserScroll]
}