From 3841a7ad68c7ddbcc108f884a9b71d0900b103f0 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 12 Mar 2025 23:08:20 +0300
Subject: [PATCH] F: Add masking blur effects for edges of graphs

---
 .vscode/settings.json                         |  1 +
 .../src/components/modal/modal-view.tsx       | 39 +++++++++++++++----
 .../oss-page/editor-oss-graph/oss-flow.tsx    |  2 +-
 .../dialogs/dlg-show-ast/dlg-show-ast.tsx     |  8 +++-
 .../dlg-show-type-graph.tsx                   |  3 +-
 .../rsform-page/editor-term-graph/tg-flow.tsx |  2 +-
 rsconcept/frontend/src/styling/overrides.css  |  3 +-
 rsconcept/frontend/src/styling/styles.css     | 17 ++++++++
 8 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0f92a4b3..0a711b90 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -114,6 +114,7 @@
     "lezer",
     "Litr",
     "loct",
+    "mgraph",
     "moprho",
     "multiword",
     "mypy",
diff --git a/rsconcept/frontend/src/components/modal/modal-view.tsx b/rsconcept/frontend/src/components/modal/modal-view.tsx
index d3874e8b..ab0d84a8 100644
--- a/rsconcept/frontend/src/components/modal/modal-view.tsx
+++ b/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>
 
-        <Button
-          text='Закрыть'
-          aria-label='Закрыть'
-          className='z-pop my-2 mx-auto text-sm min-w-28'
-          onClick={hideDialog}
-        />
+        {!fullScreen ? (
+          <Button
+            text='Закрыть'
+            aria-label='Закрыть'
+            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>
   );
diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx
index 40985489..43f85afd 100644
--- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx
+++ b/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}
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx
index 636071d6..0818e61a 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/dlg-show-ast.tsx
+++ b/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'
         )}
       >
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/dlg-show-type-graph.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/dlg-show-type-graph.tsx
index 6544f689..870b326d 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/dlg-show-type-graph.tsx
+++ b/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>
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx
index 2ddab622..5c12e30c 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx
+++ b/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}
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index 49dc2701..2c631d10 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/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-right: 3px;
+  margin: 1rem;
 
   background-color: transparent;
   color: var(--clr-prim-600);
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index 5e9a1739..f44425e0 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/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;
+}