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'>
+        <div className='flex-grow text-center'>{data.label}</div>
+        <div className='cc-icons'>
           <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>
+          <MiniButton
+            icon={<CiSquareRemove className='icon-red' size='1rem' />}
+            title='Удалить'
+            onClick={handleDelete}
+          />
         </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(
-    () =>
-      !model.schema
-        ? []
-        : model.schema.items.map(operation => ({
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  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()
-          })),
-    [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(
-    () =>
-      !model.schema
-        ? []
-        : model.schema.arguments.map((argument, index) => ({
+    setEdges(
+      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);
+  }, [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 {
-  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);
+  }
 }