From fbaf17ea58feed58e6e9828c95f0d4b4fa102cfb Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sun, 21 Jul 2024 22:50:43 +0300
Subject: [PATCH] Fix frontend

---
 .../OssPage/EditorOssGraph/InputNode.tsx      | 43 ++++++-------
 .../pages/OssPage/EditorOssGraph/OssFlow.tsx  | 63 ++++++++-----------
 rsconcept/frontend/src/styling/overrides.css  | 31 ++++-----
 3 files changed, 62 insertions(+), 75 deletions(-)

diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
index c0ea650a..deb6f1a9 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/InputNode.tsx
@@ -8,9 +8,12 @@ import { useOssEdit } from '../OssEditContext';
 
 interface InputNodeProps {
   id: string;
+  data: {
+    label: string;
+  };
 }
 
-function InputNode({ id }: InputNodeProps) {
+function InputNode({ id, data }: InputNodeProps) {
   const controller = useOssEdit();
   console.log(controller.isMutable);
 
@@ -26,29 +29,21 @@ function InputNode({ id }: InputNodeProps) {
   return (
     <>
       <Handle type='target' position={Position.Bottom} />
-      <div>
-        <MiniButton
-          className='float-right'
-          icon={<CiSquareRemove className='icon-red' />}
-          title='Удалить'
-          onClick={handleDelete}
-          color={'red'}
-        />
-        <div>
-          Тип: <strong>Ввод</strong>
-        </div>
-        <div>
-          {/* Схема:{controller.getBind(id) === undefined ? '' : controller.getBind(id)} */}
-          <strong>
-            <MiniButton
-              className='float-right'
-              icon={<PiPlugsConnected className='icon-green' />}
-              title='Привязать схему'
-              onClick={() => {
-                handleClick();
-              }}
-            />
-          </strong>
+      <div className='flex justify-between'>
+        <div className='flex-grow text-center'>{data.label}</div>
+        <div className='cc-icons'>
+          <MiniButton
+            icon={<PiPlugsConnected className='icon-green' />}
+            title='Привязать схему'
+            onClick={() => {
+              handleClick();
+            }}
+          />
+          <MiniButton
+            icon={<CiSquareRemove className='icon-red' size='1rem' />}
+            title='Удалить'
+            onClick={handleDelete}
+          />
         </div>
       </div>
     </>
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
index 29b6e4d8..e2b96c7e 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx
@@ -1,10 +1,8 @@
 'use client';
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useLayoutEffect, useMemo } from 'react';
 import {
-  Edge,
   EdgeChange,
-  Node,
   NodeChange,
   NodeTypes,
   ProOptions,
@@ -30,38 +28,31 @@ function OssFlow() {
   const controller = useOssEdit();
   const viewport = useViewport();
 
-  const initialNodes: Node[] = useMemo(
-    () =>
-      !model.schema
-        ? []
-        : model.schema.items.map(operation => ({
-            id: String(operation.id),
-            data: { label: operation.alias },
-            position: { x: operation.position_x, y: operation.position_y },
-            type: operation.operation_type.toString()
-          })),
-    [model.schema]
-  );
-  // const initialNodes = [
-  //   { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
-  //   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } }
-  // ];
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const initialEdges: Edge[] = useMemo(
-    () =>
-      !model.schema
-        ? []
-        : model.schema.arguments.map((argument, index) => ({
-            id: String(index),
-            source: String(argument.argument),
-            target: String(argument.operation)
-          })),
-    [model.schema]
-  );
-  // const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
-
-  const [nodes, onNodesChange] = useNodesState<Node>(initialNodes);
-  const [edges, onEdgesChange] = useEdgesState<Edge>(initialEdges);
+  useLayoutEffect(() => {
+    if (!model.schema) {
+      setNodes([]);
+      setEdges([]);
+      return;
+    }
+    setNodes(
+      model.schema.items.map(operation => ({
+        id: String(operation.id),
+        data: { label: operation.alias },
+        position: { x: operation.position_x, y: operation.position_y },
+        type: operation.operation_type.toString()
+      }))
+    );
+    setEdges(
+      model.schema.arguments.map((argument, index) => ({
+        id: String(index),
+        source: String(argument.argument),
+        target: String(argument.operation)
+      }))
+    );
+  }, [model.schema, setNodes, setEdges]);
 
   const getPositions = useCallback(
     () =>
@@ -75,7 +66,6 @@ function OssFlow() {
 
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
-      // @ts-expect-error TODO: Figure out internal type errors in ReactFlow
       onNodesChange(changes);
     },
     [onNodesChange]
@@ -83,7 +73,6 @@ function OssFlow() {
 
   const handleEdgesChange = useCallback(
     (changes: EdgeChange[]) => {
-      // @ts-expect-error TODO: Figure out internal type errors in ReactFlow
       onEdgesChange(changes);
     },
     [onEdgesChange]
@@ -116,6 +105,8 @@ function OssFlow() {
         fitView
         proOptions={proOptions}
         nodeTypes={OssNodeTypes}
+        maxZoom={2}
+        minZoom={0.75}
       />
     ),
     [nodes, edges, proOptions, handleNodesChange, handleEdgesChange, OssNodeTypes]
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index 8cc27759..f5eb6cf6 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -34,21 +34,22 @@
   }
 }
 
-.Flow {
-  flex-grow: 1;
-  font-size: 12px;
-}
-
-.react-flow__node-input {
-  border: 1px solid #555;
-  padding: 10px;
-  width: 150px;
-  border-radius: 5px;
-}
-
+.react-flow__node-input,
 .react-flow__node-synthesis {
-  border: 1px solid #555;
-  padding: 10px;
-  width: 250px;
+  border: 1px solid;
+  padding: 2px;
+  width: 120px;
+
   border-radius: 5px;
+  background-color: var(--cl-bg-120);
+
+  color: var(--cl-fg-100);
+  border-color: var(--cl-bg-40);
+  background-color: var(--cl-bg-120);
+
+  &.dark {
+    color: var(--cd-fg-100);
+    border-color: var(--cd-bg-40);
+    background-color: var(--cd-bg-120);
+  }
 }