graph representation rewritten using elkjs

src/components/NodeCard.tsx

@@ -8,15 +8,18 @@ interface Props {
   node2d: Node2D;
   selected: boolean;
   onSelect: () => void;
+  onSocketRef?: (type: 'input' | 'output', index: number, el: HTMLDivElement | null) => void;
 }
 
-const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, selected, onSelect }, ref) {
+const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, selected, onSelect, onSocketRef }, ref) {
   const node = node2d.node;
   function handleClick() {
     onSelect();
   }
 
   const info = node.behaviour.getDisplayInfo();
+  const inputSockets = info.sockets.filter((s) => s.type === 'input');
+  const outputSockets = info.sockets.filter((s) => s.type === 'output');
 
   return (
     <div
@@ -25,6 +28,32 @@ const NodeCard = forwardRef<HTMLDivElement, Props>(function NodeCard({ node2d, s
       style={{ left: node2d.position.x, top: node2d.position.y, width: 100 }}
       onClick={handleClick}
     >
+      <div className="node__sockets node__sockets--input">
+        {
+          inputSockets.map((socket) => (
+            <div
+              key={`input.${socket.index}`}
+              ref={(el) => onSocketRef?.('input', socket.index, el)}
+              className="node__socket"
+              style={{ background: ResourceDescriptions[socket.resource].color }}
+              title={`${ResourceDescriptions[socket.resource].label} (вход)`}
+            />
+          ))
+        }
+      </div>
+      <div className="node__sockets node__sockets--output">
+        {
+          outputSockets.map((socket) => (
+            <div
+              key={`output.${socket.index}`}
+              ref={(el) => onSocketRef?.('output', socket.index, el)}
+              className="node__socket"
+              style={{ background: ResourceDescriptions[socket.resource].color }}
+              title={`${ResourceDescriptions[socket.resource].label} (выход)`}
+            />
+          ))
+        }
+      </div>
       <div className="node__id">{node.id}</div>
       <div className="node__title">{node.name}</div>
       <div className="node__kind">{node.behaviour.kind}</div>