feat(frontend): overlay scrollbars for editor

1 files changed, 0 insertions, 148 deletions

diff --git a/subprojects/frontend/src/editor/EditorAreaDecorations.tsx b/subprojects/frontend/src/editor/EditorAreaDecorations.tsx
deleted file mode 100644
index e00cc290..00000000
--- a/subprojects/frontend/src/editor/EditorAreaDecorations.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { type CSSObject, type Theme, styled } from '@mui/material/styles';
-import React, { memo, useEffect, useState } from 'react';
-
-const SHADOW_SIZE = 10;
-
-const EditorAreaDecoration = styled('div')({
-  position: 'absolute',
-  pointerEvents: 'none',
-});
-
-function shadowTheme(
-  origin: string,
-  scaleX: boolean,
-  scaleY: boolean,
-): CSSObject {
-  function radialGradient(opacity: number, scale: string): string {
-    return `radial-gradient(
-        farthest-side at ${origin},
-        rgba(0, 0, 0, ${opacity}),
-        rgba(0, 0, 0, 0)
-      )
-      ${origin} /
-      ${scaleX ? scale : '100%'}
-      ${scaleY ? scale : '100%'}
-      no-repeat`;
-  }
-
-  return {
-    background: `
-      ${radialGradient(0.2, '40%')},
-      ${radialGradient(0.14, '50%')},
-      ${radialGradient(0.12, '100%')}
-    `,
-  };
-}
-
-function animateSize(
-  theme: Theme,
-  direction: 'height' | 'width',
-  opacity: number,
-): CSSObject {
-  return {
-    [direction]: opacity * SHADOW_SIZE,
-    transition: theme.transitions.create(direction, {
-      duration: theme.transitions.duration.shortest,
-    }),
-  };
-}
-
-const TopDecoration = memo(
-  styled(EditorAreaDecoration, {
-    shouldForwardProp: (prop) => prop !== 'visible' && prop !== 'opacity',
-  })<{
-    visible: boolean;
-    opacity: number;
-  }>(({ theme, visible, opacity }) => ({
-    display: visible ? 'block' : 'none',
-    top: 0,
-    left: 0,
-    right: 0,
-    ...shadowTheme('50% 0', false, true),
-    ...animateSize(theme, 'height', opacity),
-  })),
-);
-
-const GutterDecoration = memo(
-  styled(EditorAreaDecoration, {
-    shouldForwardProp: (prop) =>
-      prop !== 'top' &&
-      prop !== 'bottom' &&
-      prop !== 'guttersWidth' &&
-      prop !== 'opacity',
-  })<{
-    top: number;
-    bottom: number;
-    guttersWidth: number;
-    opacity: number;
-  }>(({ theme, top, bottom, guttersWidth, opacity }) => ({
-    top,
-    left: guttersWidth,
-    bottom,
-    ...shadowTheme('0 50%', true, false),
-    ...animateSize(theme, 'width', opacity),
-  })),
-);
-
-function convertToOpacity(scroll: number): number {
-  return Math.max(0, Math.min(1, scroll / SHADOW_SIZE));
-}
-
-export default function EditorAreaDecorations({
-  parent,
-  scroller,
-}: {
-  parent: HTMLElement | undefined;
-  scroller: HTMLElement | undefined;
-}): JSX.Element {
-  const [top, setTop] = useState(0);
-  const [bottom, setBottom] = useState(0);
-  const [guttersWidth, setGuttersWidth] = useState(0);
-  const [topOpacity, setTopOpacity] = useState(0);
-  const [gutterOpacity, setGutterOpacity] = useState(0);
-
-  useEffect(() => {
-    if (parent === undefined || scroller === undefined) {
-      return () => {};
-    }
-    const gutters = scroller.querySelector('.cm-gutters');
-
-    const updateBounds = () => {
-      const parentRect = parent.getBoundingClientRect();
-      const rect = scroller.getBoundingClientRect();
-      setTop(rect.top - parentRect.top);
-      setBottom(parentRect.bottom - rect.bottom);
-      setGuttersWidth(gutters?.clientWidth ?? 0);
-    };
-    updateBounds();
-    const resizeObserver = new ResizeObserver(updateBounds);
-    resizeObserver.observe(scroller);
-    if (gutters !== null) {
-      resizeObserver.observe(gutters);
-    }
-
-    const updateScroll = () => {
-      setTopOpacity(convertToOpacity(scroller.scrollTop));
-      setGutterOpacity(convertToOpacity(scroller.scrollLeft));
-    };
-    updateScroll();
-    scroller.addEventListener('scroll', updateScroll);
-
-    return () => {
-      resizeObserver.disconnect();
-      scroller.removeEventListener('scroll', updateScroll);
-    };
-  }, [parent, scroller, setTop]);
-
-  return (
-    <>
-      <GutterDecoration
-        top={top}
-        bottom={bottom}
-        guttersWidth={guttersWidth}
-        opacity={gutterOpacity}
-      />
-      <TopDecoration visible={top === 0} opacity={topOpacity} />
-    </>
-  );
-}