F: Add masking blur effects for edges of graphs

.vscode/settings.json

@@ -114,6 +114,7 @@
     "lezer",
     "Litr",
     "loct",
+    "mgraph",
     "moprho",
     "multiword",
     "mypy",

rsconcept/frontend/src/components/modal/modal-view.tsx

@@ -14,7 +14,10 @@ import { IconClose } from '../icons';
 import { ModalBackdrop } from './modal-backdrop';
 import { type ModalProps } from './modal-form';
 
-interface ModalViewProps extends ModalProps {}
+interface ModalViewProps extends ModalProps {
+  /** Float all UI elements on top of contents. */
+  fullScreen?: boolean;
+}
 
 /**
  * Displays a customizable modal window with submit form.
@@ -26,6 +29,7 @@ export function ModalView({
   overflowVisible,
   helpTopic,
   hideHelpWhen,
+  fullScreen,
   ...restProps
 }: React.PropsWithChildren<ModalViewProps>) {
   const hideDialog = useDialogsStore(state => state.hideDialog);
@@ -53,7 +57,16 @@ export function ModalView({
           onClick={hideDialog}
         />
 
-        {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
+        {header ? (
+          <h1
+            className={clsx(
+              'px-12 py-2 select-none',
+              fullScreen && 'z-pop absolute top-0 right-1/2 translate-x-1/2 cc-blur bg-prim-100/90 rounded-2xl'
+            )}
+          >
+            {header}
+          </h1>
+        ) : null}
 
         <div
           className={clsx(
@@ -71,12 +84,22 @@ export function ModalView({
           {children}
         </div>
 
+        {!fullScreen ? (
           <Button
             text='Закрыть'
             aria-label='Закрыть'
-          className='z-pop my-2 mx-auto text-sm min-w-28'
+            className={clsx(
+              'my-2 mx-auto text-sm min-w-28',
+              fullScreen && 'z-pop absolute bottom-0 right-1/2 translate-x-1/2 cc-blur'
+            )}
             onClick={hideDialog}
           />
+        ) : (
+          <div className='z-pop absolute bottom-0 right-1/2 translate-x-1/2 bg-prim-100/90 cc-blur p-3 rounded-xl'>
+            {' '}
+            <Button text='Закрыть' aria-label='Закрыть' className='text-sm min-w-28' onClick={hideDialog} />
+          </div>
+        )}
       </div>
     </div>
   );

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx

@@ -199,7 +199,7 @@ export function OssFlow() {
 
       <NodeContextMenu isOpen={isContextMenuOpen} onHide={() => setIsContextMenuOpen(false)} {...menuProps} />
 
-      <div className='cc-fade-in relative w-[100vw]' style={{ height: mainHeight, fontFamily: 'Rubik' }}>
+      <div className='cc-fade-in relative w-[100vw] cc-mask-sides' style={{ height: mainHeight, fontFamily: 'Rubik' }}>
         <ReactFlow
           nodes={nodes}
           edges={edges}

rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx

@@ -26,12 +26,16 @@ export function DlgShowAST() {
   const [isDragging, setIsDragging] = useState(false);
 
   return (
-    <ModalView className='relative w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]' helpTopic={HelpTopic.UI_FORMULA_TREE}>
+    <ModalView
+      className='relative w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)] cc-mask-sides'
+      helpTopic={HelpTopic.UI_FORMULA_TREE}
+      fullScreen
+    >
       <div
         className={clsx(
           'absolute z-pop top-2 right-1/2 translate-x-1/2 max-w-[60ch]',
           'px-2 rounded-2xl',
-          'cc-blur bg-prim-100',
+          'cc-blur bg-prim-100/90',
           'text-lg text-center'
         )}
       >

rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/dlg-show-type-graph.tsx

@@ -36,7 +36,8 @@ export function DlgShowTypeGraph() {
   return (
     <ModalView
       header='Граф ступеней'
-      className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
+      className='cc-mask-sides flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
+      fullScreen
       helpTopic={HelpTopic.UI_TYPE_GRAPH}
     >
       <ReactFlowProvider>

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx

@@ -188,7 +188,7 @@ export function TGFlow() {
         <ViewHidden items={hidden} />
       </div>
 
-      <div className='relative outline-hidden w-[100dvw]' style={{ height: mainHeight }}>
+      <div className='relative outline-hidden w-[100dvw] cc-mask-sides' style={{ height: mainHeight }}>
         <ReactFlow
           nodes={nodes}
           onNodesChange={onNodesChange}

rsconcept/frontend/src/styling/overrides.css

@@ -62,8 +62,7 @@
 .react-flow__attribution {
   font-size: var(--font-size-sm);
   font-family: var(--font-ui);
-  margin-left: 3px;
+  margin: 1rem;
-  margin-right: 3px;
 
   background-color: transparent;
   color: var(--clr-prim-600);

rsconcept/frontend/src/styling/styles.css

@@ -264,3 +264,20 @@
   align-items: center;
   justify-content: center;
 }
+
+@utility cc-mask-sides {
+  --mask-border-size: 2rem;
+
+  mask-image: linear-gradient(to top, transparent, black calc(var(--mask-border-size))),
+    linear-gradient(to bottom, transparent, black calc(var(--mask-border-size))),
+    linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
+    linear-gradient(to right, transparent, black calc(var(--mask-border-size)));
+
+  -webkit-mask-image: linear-gradient(to top, transparent, black calc(var(--mask-border-size))),
+    linear-gradient(to bottom, transparent, black calc(var(--mask-border-size))),
+    linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
+    linear-gradient(to right, transparent, black calc(var(--mask-border-size)));
+
+  mask-composite: intersect;
+  -webkit-mask-composite: destination-in;
+}