Move and rename files (2/4) (#987)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

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

@@ -0,0 +1,48 @@
+/*
+ * 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])
+}

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

@@ -0,0 +1,49 @@
+/*
+ * 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])
+}

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

@@ -0,0 +1,38 @@
+/*
+ * 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]
+}

src/components/editor-page/synced-scroll/scroll-props.ts

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export interface ScrollProps {
+  scrollState?: ScrollState
+  onScroll?: (scrollState: ScrollState) => void
+  onMakeScrollSource?: () => void
+}
+
+export interface ScrollState {
+  firstLineInView: number
+  scrolledPercentage: number
+}
+
+export interface DualScrollState {
+  editorScrollState: ScrollState
+  rendererScrollState: ScrollState
+}

src/components/editor-page/synced-scroll/utils.ts

@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { LineMarkerPosition } from '../../markdown-renderer/types'
+
+export const findLineMarks = (lineMarks: LineMarkerPosition[], lineNumber: number): { lastMarkBefore: LineMarkerPosition | undefined, firstMarkAfter: LineMarkerPosition | undefined } => {
+  let lastMarkBefore
+  let firstMarkAfter
+  for (let i = 0; i < lineMarks.length; i++) {
+    const currentMark = lineMarks[i]
+    if (!currentMark) {
+      continue
+    }
+
+    if (currentMark.line <= lineNumber) {
+      lastMarkBefore = currentMark
+    }
+    if (currentMark.line > lineNumber) {
+      firstMarkAfter = currentMark
+    }
+    if (!!firstMarkAfter && !!lastMarkBefore) {
+      break
+    }
+  }
+  return {
+    lastMarkBefore,
+    firstMarkAfter
+  }
+}