colorise wires

[nogizhopaboroda]

prototype code:

import { useEffect, useMemo } from "react";
import { EdgeProps, getBezierPath, getConnectedEdges } from "reactflow";
import { nanoid } from "nanoid";
import useTheme from "../hooks/useTheme";
import useStore from "../store";
import useAudioNode from "../hooks/useAudioNode";
import { PortType } from "../constants";

const portColors = {
  [PortType.Audio]: "#4ade80", // vibrant green
  [PortType.Gate]: "#c084fc", // rich purple
  [PortType.Number]: "#38bdf8", // bright blue
  [PortType.Any]: "#ffffff", // white
};

const Wire = ({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  data,
  markerStart,
  markerEnd,
  source,
  target,
  sourceHandleId,
  targetHandleId,
  selected,
}: EdgeProps) => {
  const theme = useTheme();
  const getNode = useStore(({ getNode }) => getNode);
  const sourceNode = getNode(source);
  const sourceAudioNode = useAudioNode(sourceNode?.id || "");
  const targetNode = getNode(target);
  const targetAudioNode = useAudioNode(targetNode?.id || "");
  const isConnectedToSelected = sourceNode?.selected || targetNode?.selected;
  useEffect(() => {
    if (!sourceHandleId || !targetHandleId) {
      return;
    }
    console.log(`connected ${source} to ${target}`);
    return () => {
      console.log(`disconnected ${source} from ${target}`);
    };
  }, [source, sourceHandleId, target, targetHandleId]);

  const [edgePath] = getBezierPath({
    targetX,
    targetY,
    targetPosition,
    sourceX,
    sourceY,
    sourcePosition,
  });

  // @ts-ignore
  const sourcePortType = sourceAudioNode?.node?.outputs?.[sourceHandleId].type;

  // @ts-ignore
  const targetPortType = targetAudioNode?.node?.inputs?.[targetHandleId].type;

  // console.log(
  //   "from",
  //   // @ts-ignore
  //   sourceAudioNode?.node?.outputs[sourceHandleId].type,
  //   sourceHandleId,
  //   "to",
  //   // @ts-ignore
  //   targetAudioNode?.node?.inputs[targetHandleId].type,
  //   targetHandleId,
  // );

  const gradientId = useMemo(() => `gradient-${nanoid()}`, []);

  return (
    <>
      <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
        {/* @ts-ignore */}
        <stop offset="0%" stopColor={portColors[sourcePortType]} />
        {/* @ts-ignore */}
        <stop offset="100%" stopColor={portColors[targetPortType]} />
      </linearGradient>
      <path
        id={id}
        style={{
          ...style,
          stroke: selected
            ? theme.colors.accent2
            : isConnectedToSelected
              ? theme.colors.highlight3
              : `url(#${gradientId})`,
        }}
        className="react-flow__edge-path Wire"
        d={edgePath}
        markerEnd={markerEnd}
      />
      <path
        style={{
          ...style,
          strokeWidth: 8,
          color: "transparent",
          opacity: 0,
          cursor: "pointer",
        }}
        d={edgePath}
        markerEnd={markerEnd}
      />
    </>
  );
};

export default Wire;

looks like this