Fix frontend

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>
+      <div className='flex justify-between'>
-        <MiniButton
+        <div className='flex-grow text-center'>{data.label}</div>
-          className='float-right'
+        <div className='cc-icons'>
-          icon={<CiSquareRemove className='icon-red' />}
+          <MiniButton
-          title='Удалить'
+            icon={<PiPlugsConnected className='icon-green' />}
-          onClick={handleDelete}
+            title='Привязать схему'
-          color={'red'}
+            onClick={() => {
-        />
+              handleClick();
-        <div>
+            }}
-          Тип: <strong>Ввод</strong>
+          />
-        </div>
+          <MiniButton
-        <div>
+            icon={<CiSquareRemove className='icon-red' size='1rem' />}
-          {/* Схема:{controller.getBind(id) === undefined ? '' : controller.getBind(id)} */}
+            title='Удалить'
-          <strong>
+            onClick={handleDelete}
-            <MiniButton
+          />
-              className='float-right'
-              icon={<PiPlugsConnected className='icon-green' />}
-              title='Привязать схему'
-              onClick={() => {
-                handleClick();
-              }}
-            />
-          </strong>
         </div>
       </div>
     </>

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(
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-    () =>
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-      !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 initialEdges: Edge[] = useMemo(
+  useLayoutEffect(() => {
-    () =>
+    if (!model.schema) {
-      !model.schema
+      setNodes([]);
-        ? []
+      setEdges([]);
-        : model.schema.arguments.map((argument, index) => ({
+      return;
-            id: String(index),
+    }
-            source: String(argument.argument),
+    setNodes(
-            target: String(argument.operation)
+      model.schema.items.map(operation => ({
-          })),
+        id: String(operation.id),
-    [model.schema]
+        data: { label: operation.alias },
-  );
+        position: { x: operation.position_x, y: operation.position_y },
-  // const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
+        type: operation.operation_type.toString()
-
+      }))
-  const [nodes, onNodesChange] = useNodesState<Node>(initialNodes);
+    );
-  const [edges, onEdgesChange] = useEdgesState<Edge>(initialEdges);
+    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]

rsconcept/frontend/src/styling/overrides.css

@@ -34,21 +34,22 @@
   }
 }
 
-.Flow {
+.react-flow__node-input,
-  flex-grow: 1;
-  font-size: 12px;
-}
-
-.react-flow__node-input {
-  border: 1px solid #555;
-  padding: 10px;
-  width: 150px;
-  border-radius: 5px;
-}
-
 .react-flow__node-synthesis {
-  border: 1px solid #555;
+  border: 1px solid;
-  padding: 10px;
+  padding: 2px;
-  width: 250px;
+  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);
+  }
 }