1 files changed, 149 insertions, 0 deletions

diff --git a/subprojects/frontend/src/editor/EditorAreaDecorations.tsx b/subprojects/frontend/src/editor/EditorAreaDecorations.tsx
new file mode 100644
index 00000000..f33bf25f
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorAreaDecorations.tsx
@@ -0,0 +1,149 @@
+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,
+      easing: theme.transitions.easing.sharp,
+    }),
+  };
+}
+
+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} />
+    </>
+  );
+}